イオン2ボタンが右揃えボタンにならない

Question

Ionic2を使用してページの右側にボタンを引く方法を探しています。私が編集してフォーム要素を持っていると私は右に引っ張るしたいというボタンのを保存します。

次のようになりますフォーム生成

<div> 
    <button ion-button (click)="toggleEdit()"> 
    <ion-icon name="create"></ion-icon> 
    </button> 
</div> 
<ion-list> 
    <ion-card-content> 
    <ng-content> 
    </ng-content> 
    </ion-card-content> 
    <div class="row center"> 
    <div class="col text-right"> 
     <button ion-button color="secondary" icon-end (click)="save()"> 
     <ion-icon name="save"></ion-icon>Save 
     </button> 
     <!--<a style="min-width: 50%;border-radius: 0px;" class="button button-dark icon-left ion-close">Cancel</a> 
     <a style="min-width: 50%;border-radius: 0px;" class="button button-balanced icon-left ion-checkmark">Save</a>--> 
    </div> 
    </div> 
</ion-list> 

：あなたは、保存ボタンにはない見ることができるように

を右に引く、 私はテキスト右を使ってみましたが、多分それはイオン1のためだけに動作しますか？また、アイコンの終わりの指示を右に引っ張るために使用しようとしましたが、それは動作していないようです。別のボタンがある場合にのみ動作すると思います。

保存ボタンを右に揃えるには、適切なイオン方式がありますか？

Answer 1

this working plunkerをご覧ください。あなたはion-itemを使用し、ボタンにitem-right属性を追加することができます。

<ion-card> 
    <ion-item padding> 
     <button default ion-button item-right>Button</button> 
    </ion-item> 
    <ion-card-header> 
     Header 
    </ion-card-header> 
    <ion-card-content> 
     The British use the term "header", but the American term "head-shot" the English simply refuse to adopt. 
    </ion-card-content> 
    <ion-item padding> 
     <button default ion-button item-right>Button</button> 
    </ion-item> 
    </ion-card> 

あなたは、コンテンツの残りの部分とそれを整列させるpadding属性（またはpadding-left、padding-right、padding-bottom、padding-top、...）を使用することができます。私は考えることができる最もイオン方法の一つだ

...

別のオプションは、ちょうどこのようにCSSを使用することです：

<ion-card> 
     ... 
    <div style="width: 100%; padding: 26px; text-align:right;"> 
     <button ion-button>Button</button> 
    </div> 
    </ion-card>