如何在Ionic2中對齊項目？

Question

我們如何應用Ionic2提供的默認對齊類？例如，我想要一個按鈕出現在卡的右側。

<ion-card *ngFor="let table of tables"> 
    <ion-card-content> 
     Card Text 
     <button ion-button> 
      <ion-icon name="add"></ion-icon> Add Item 
     </button> 
    </ion-card-content> 
</ion-card> 

Answer 1

檢查Item placement section here

您可以使用ion-item包和放置屬性。

例如：

<ion-card *ngFor="let table of tables"> 
    <ion-card-content> 
     <ion-item> 
     Card Text 
     <button item-right ion-button>//item right 
      <ion-icon name="add"></ion-icon> Add Item 
     </button> 
     </ion-item> 
    </ion-card-content> 
</ion-card> 

或者你可以使用Grid-row ,cols

<ion-card *ngFor="let table of tables"> 
    <ion-card-content> 
     <ion-row> 
     <ion-row> 
     <ion-col width-80> 
      Card Text 
     </ion-col> 
     <ion-col> 
     <button ion-button> 
      <ion-icon name="add"></ion-icon> Add Item 
     </button> 
     </ion-col> 
    </ion-row> 
    </ion-card-content> 
</ion-card>