Ionic项目行

时间：2018-04-27 12:27:39

标签： html css ionic-framework ionic3

我想要一个带有3个（或4个，见下文）列的离子列表：

  • 第一列将是一个可点击的图标
  • 第二列将显示列表项文本
  • 第三列将是一个可点击的图标
  • 第四列将是一个雪佛龙，在点击时应该转到项目详细信息。我知道你可以用一个修饰符在离子项上添加一个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" width="20px"/>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

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

这是我希望它看起来的图片： enter image description here

  • 红色部分是可点击的图标：注意它的矩形形状，意思是，如果项目高度没有被强制改变（由于文本换行），那么它应该是矩形=＆gt; width必须与ion-item（???）
    • 的高度相同
  • 绿色部分是标题所在的位置，这是多行文字可以出现的地方，必须包装
  • 蓝色部分是tappable图标应该去的地方（它很窄，但它应该是可点击的）
  • 浅蓝色部分是雪佛龙的所在。

我不确定我是否可以将 ion-grid 放在 ion-item 标记内，但我在网上找到了一些随机的例子。 请告诉我如何继续此设置。

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

1 个答案:

答案 0 :(得分：0)

设置正确。

问题是你的网格上设置的是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" width="20px"/>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-item>

我还注意到你错过了一个带有雪佛龙的专栏。可能会尝试添加它吗？

相关问题
最新问题