Ionic 2 Button wird nicht richtig ausrichten Knopf

Question

Ich bin auf der Suche nach einer Möglichkeit, meine Tasten mit Ionic2 auf die rechte Seite der Seite zu ziehen. Ich habe eine Form Komponente mit bearbeiten und Schaltfläche speichern, dass ich nach rechts ziehen möchte:

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

, die eine Form erzeugt, die wie folgt aussieht:

Wie Sie das Speichern sehen Taste nicht ziehe nach rechts, Ich habe versucht mit Text-Recht, aber vielleicht funktioniert das nur für ionische 1? Versuchte auch, die icon-end-Direktive zu verwenden, um es nach rechts zu ziehen, aber das scheint nicht zu funktionieren Ich denke, es funktioniert nur, wenn es eine andere Taste gibt.

Kann jemand den richtigen ionischen Weg, um die Save-Taste nach rechts auszurichten?

Answer 1

Bitte schauen Sie sich this working plunker an. Sie könnten eine ion-item und fügen Sie das item-right Attribut auf die Schaltfläche:

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

Sie können das padding Attribut (oder padding-left, padding-right, padding-bottom, padding-top, ...) mit dem Rest des Inhalts ausrichten .

, dass eine der meisten ionischen Wege ist, die ich denken kann ...

Eine andere Möglichkeit wäre, nur CSS wie folgt zu verwenden:

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