Ionic 2 multiple ion-элемент в ряду

Я хочу показать 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>

Но это не сработало.

2 7
typescript ionic-framework ionic2 ionic3

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>

Вы можете найти дополнительную информацию о явных атрибутах процента столбцовздесь .

Обновить

По состоянию на ионный 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.
14

Попробуйте: 

<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 для этого. Проверьте Этот учебник и здесь

0