如何在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>