我想在我的离子列表中连续显示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>
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.
原文地址:https://www.jb51.cc/angularjs/141386.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。