Ionic 2 nhiều ion mục liên tiếp

Question

Tôi muốn hiển thị 4 ion-items trong số ion-list liên tiếp của tôi.

Kể từ khi tôi đang sử dụng Bootstrap, tôi đã cố gắng để làm:

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

nhưng nó đã không làm việc.

Answer 1

Bạn có thể tự thiết lập độ rộng của mỗi cột bằng Explicit Cột Tỷ lệ Thuộc tính như thế này:

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

Hoặc chỉ cần thêm ion-col động, và họ sẽ mở rộng để điền vào họ hàng và sẽ thay đổi kích thước để phù hợp với các cột bổ sung, như sau:

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

Bạn có thể tìm thêm thông tin về Explicit Thuộc tính Tỷ lệ phần trăm cột here.

CẬP NHẬT

Tính đến Ionic 3.0.0, con đường để đạt được cùng với lưới điện mới sẽ là một cái gì đó như thế này:

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

Vì vậy, các thuộc tính width-25 cần phải được thay thế bằng col-3.

Answer 2

Hãy thử:

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

Bạn không thực sự cần bootstrap cho việc này. Kiểm tra this tutorial và here