離子2多個連續

離子項目我想表明我的在一排。離子2多個連續

由於我使用的引導，我試圖做的：

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

，但沒有奏效。

來源

2016-12-16 TheUnreal

你想4項或按鈕？ –

@SurajRao 4項，我不在乎它是否是一個按鈕。 – TheUnreal

@MohanGopi數字鍵盤與我的問題有什麼關係？ – TheUnreal

您可以通過使用明確列百分比手動設置每列的寬度屬性這樣的：

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

您可以找到更多關於Explicit列百分比屬性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更換。

來源

2016-12-16 11:05:59 sebaferreras

離子頭像不會工作outisde離子列表項... – TheUnreal

好抓！我已經更新了答案。這個想法是，你可以在'ion-col'元素中包含任何你想要的元素，這就是你可以將元素放置在同一行的元素。 – 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>

你並不真正需要引導這一點。檢查this tutorial和here

來源

2016-12-16 10:32:48

我曾嘗試它，在'COL-SM-3'不工作，它顯示了一個項目每行 – TheUnreal

哦..對不起，現在我明白了..將更新answer.You希望網格 –

doese't' ion-item'需要在列表中使用嗎？是否有可能爲每個用戶創建一個新項目而不是一個項目？ – TheUnreal

離子2多個連續

回答

相關問題