Ionic 2连续多个离子项目

Question

我想在我的 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>

但是没用。

Answer 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>

你真的不需要 bootstrap。检查 this tutorial and here

Answer 2

您可以使用显式列百分比属性手动设置每列的宽度，如下所示：

<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。

Ionic 2连续多个离子项目

Ionic 2 multiple ion-item in a row

typescript

ionic-framework

ionic2

ionic3

angular