webentwicklung-frage-antwort-db.com.de

Ionic 2 mehrere Ionenelemente in einer Reihe

Ich möchte 4 ion-items in meinem ion-list hintereinander anzeigen.

Da ich Bootstrap verwende, versuchte ich Folgendes:

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

aber es hat nicht funktioniert.

angulartypescriptionic-frameworkionic2ionic3
7
TheUnreal

Sie können die Breite jeder Spalte manuell festlegen, indem Sie die Explicit Column Percentage Attributes wie folgt verwenden:

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

Oder fügen Sie einfach ion-col dynamisch hinzu, und sie werden erweitert, um ihre Zeile auszufüllen, und die Größe wird angepasst, um sich an zusätzliche Spalten anzupassen:

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

Weitere Informationen zu den expliziten Spaltenprozentattributen finden Sie hier .

UPDATE

Ab Ionic 3.0.0 würde dies mit dem neuen Raster dasselbe erreichen:

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

Das width-25-Attribut muss daher durch col-3 ersetzt werden.

16
sebaferreras

Versuchen:

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

Sie brauchen nicht wirklich Bootstrap für diese . Check dieses Tutorial und hier

0
Suraj Rao