Ionic 2 连续多个离子项目

Posted 2023-03-13

【中文标题】Ionic 2 连续多个离子项目

【英文标题】：Ionic 2 multiple ion-item in a row

【发布时间】：2017-05-02 01:53:32

【问题描述】：

我想在我的ion-list 中连续显示4 个ion-items。

由于我使用的是 Bootstrap，所以我尝试这样做：

<button class="col-sm-3" ion-item *ngFor="let player of players">
    <ion-avatar item-left>
      <img [src]="user.photoURL">
    </ion-avatar>
     user.name 
  </button>

但是没有用。

【问题讨论】：

您要尝试 4 个项目或按钮吗？

@SurajRao 4 项，我不在乎它是否是一个按钮。

@MohanGopi 我的问题和数字键盘有什么关系？？

【参考方案1】：

试试：

<ion-item>
<ion-row>
<ion-col *ngFor="let player of players">
    <ion-avatar item-left>
      <img [src]="user.photoURL">
    </ion-avatar>
     user.name 
  </ion-col>
</ion-row>
</ion-item>

你真的不需要引导程序。 检查this tutorial和here

【讨论】：

我试过了，col-sm-3 不起作用，每行显示一个项目

哦..对不起，现在我明白了..会更新答案。你想要一个网格

不需要在列表中使用ion-item 吗？是否可以为每个用户创建一个新项目，而不是为所有人创建一个项目？

【参考方案2】：

您可以使用 Explicit Column Percentage Attributes 手动设置每列的宽度，如下所示：

<ion-row>
    <ion-col width-25>
        <!-- item 1 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 2 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 3 -->
    </ion-col>
    <ion-col width-25>
        <!-- item 4 -->
    </ion-col>
</ion-row>

或者只是动态添加ion-col，它们将扩展以填充其行，并调整大小以适应其他列，如下所示：

<ion-row>
    <ion-col *ngFor="let player of players">
        <ion-item>
            <ion-avatar item-left>
                <img [src]="user.photoURL">
            </ion-avatar>
             user.name 
        </ion-item>
    </ion-col>
</ion-row>

您可以找到有关显式列百分比属性here 的更多信息。

更新

截至Ionic 3.0.0，使用新网格实现相同的方法如下：

<ion-row>
    <ion-col col-3>
        <!-- item 1 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 2 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 3 -->
    </ion-col>
    <ion-col col-3>
        <!-- item 4 -->
    </ion-col>
</ion-row>

所以width-25属性需要替换为col-3。

【讨论】：

好收获！我已经更新了答案。这个想法是，您可以在 ion-col 元素中包含任何您想要的内容，这样您就可以将元素放在同一行中。