离子项目行中具有不同宽度的多列

Posted 2023-03-16

【中文标题】离子项目行中具有不同宽度的多列

【英文标题】：Multiple columns with different widths in Ionic item row

【发布时间】：2018-10-08 07:09:26

【问题描述】：

我想要一个包含 3（或 4，见下文）列的 Ionic 列表：

第一列将是一个可点击的图标 第二列是显示列表项文本的位置 第三列将是一个可点击的图标 第四列将是一个 V 形，当点击它应该转到项目详细信息。我知道您可以使用修饰符在 ion-item 上添加 V 形，但我只希望列表项的右侧（V 形所在的位置）推送到详细信息页面。 由于列表项上还有多个其他可点击的图标，我不希望它们混淆。

我尝试了以下方法：

<ion-list class="plan-list">
  <ion-item  class="plan" text-wrap detail-push *ngFor="let item of items">
    <ion-grid>
      <ion-row>
        <ion-col col-2 class="plan-left" style="border-right:2px solid #A6A6A6">
              //tappable icon which has a fixed size, and should always be centered both vertically and horizontally in it's place
        </ion-col>

        <ion-col col-7 class="plan-right">
          <div class="plan-name">item.Name</div>
        </ion-col>
        <ion-col col-1 class="plan-right">
          <div>
            <img class="plan-image-icon" src="icons/documentIcon.png" />
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

我尝试对列宽使用 col-x 修饰符，但我需要能够对它们进行更多微调。

这是我想要的图片：

红色部分是可点击的图标：注意它是矩形的，意思是如果项目的高度没有被强制改变（由于文本换行），那么它应该是矩形 => 宽度必须与高度相同离子项 (???) 绿色部分是标题所在的位置，这里可以出现多行文字，而且必须换行 蓝色部分是可点击图标的位置（它很窄，但应该是可点击的） 浅蓝色部分是人字形的位置。

我不确定是否可以将 ion-grid 放入 ion-item 标记中，但我在网上找到了一些随机示例。 请让我知道我应该如何继续此设置。

我想要一个响应式设计，如果可能的话，文本所在的绿色部分应该根据屏幕宽度改变它的宽度。

【参考方案1】：

设置正确。

问题是在您的网格上，您设置的是 10 列而不是 12 列。这应该可以：

<ion-list class="plan-list">
  <ion-item  class="plan" text-wrap detail-push *ngFor="let item of items">
    <ion-grid>
      <ion-row>
        <ion-col col-2 class="plan-left" style="border-right:2px solid #A6A6A6">
              //tappable icon which has a fixed size, and should always be centered both vertically and horizontally in it's place
        </ion-col>

        <ion-col col-9 class="plan-right">
          <div class="plan-name">item.Name</div>
        </ion-col>
        <ion-col col-1 class="plan-right">
          <div>
            <img class="plan-image-icon" src="icons/documentIcon.png" />
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

我还注意到您缺少带有人字形的列。可以试试加吗？