Ионный 2 несколько ионных элементов в строке

Question

Я хочу показать 4 ion-items в моем ion-list в строке.

Поскольку я использую 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-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.

Answer 2

Try:

<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