web-dev-qa-db-ja.com

Ionic 2つの連続した複数のイオンアイテム

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>

しかし、うまくいきませんでした。

angulartypescriptionic-frameworkionic2ionic3
8
TheUnreal

次のようなExplicit Column Percentage Attributesを使用して、各列の幅を手動で設定できます。

<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. の時点で、新しいグリッドで同じことを実現する方法は次のようになります。

<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に置き換える必要があります。

17
sebaferreras

試してください：

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