角度 – 离子2连续多个离子项目

发布时间：2020-12-17 08:34:02 所属栏目：安全来源：网络整理

导读：我想在我的离子列表中连续显示4个离子项. 由于我正在使用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个离子项.

由于我正在使用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>

但它不起作用.

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

<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的更多信息.

UPDATE

截至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.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!