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

在此处检查项目放置部分

您可以使用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>

或者你可以使用网格行，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>