ionic - Hinzufügen einer Schaltfläche in einem Eingabefeld

Question

Ich versuche, eine Schaltfläche innerhalb einer <ion-input> hinzuzufügen, aber wo ich es innerhalb der <ion-list> hinzufügen, wird die Schaltfläche nicht auf dem Bildschirm angezeigt.

Was ich versuche zu tun, ist eine Schaltfläche "vergessen" über das Passwortfeld rechts ausgerichtet anzuzeigen. Siehe Bildschirm:

Das ist mein HTML ist,

<ion-content> 
    <ion-list class="au-form" inset padding> 
     <ion-item> 
      <ion-input type="text" placeholder="Username"></ion-input> 
     </ion-item> 
     <ion-item> 
      <ion-input type="password" placeholder="Password"></ion-input> 
      <button clear>Forgot</button> 
     </ion-item> 
    </ion-list> 
</ion-content> 

Wie erreiche ich dieses Layout in Ionic 2?

Answer 1

in der jüngsten ionischen Festfreigibt. Hinzufügen von Element-rechts auf der Schaltfläche funktioniert.

<ion-item> 
<ion-input type="password" placeholder="Password"></ion-input> 
<button clear item-right>Forgot</button> 
</ion-item> 

Answer 2

try flex mit:

<ion-content> 
    <ion-list class="au-form" inset padding> 
     <ion-item> 
      <ion-input type="text" placeholder="Username"></ion-input> 
     </ion-item> 
     <ion-item> 
      <div style="display:flex"> 
      <ion-input type="password" placeholder="Password"></ion-input> 
      <button clear>Forgot</button> 
      </div> 
     </ion-item> 
    </ion-list> 
</ion-content> 

Answer 3

Ich habe etwas Ähnliches, eine deaktivierte Eingabe mit einer aktivierten Symbolschaltfläche neben dem Eingang. Hier mein HTML ist:

<ion-item> 
    <ion-label floating>My Label</ion-label> 
    <ion-input [disabled]="true" type="text" [(ngModel)]="MyModel"></ion-input> 
    <button ion-button large clear (click)="doSomething()" item-end> 
     <ion-icon name="search"></ion-icon> 
    </button> 
    </ion-item> 

So in Ihnen Fall wird diese Arbeit:

<ion-item> 
    <ion-label>Your Label</ion-label> 
    <ion-input type="text" [(ngModel)]="yourModel"></ion-input> 
    <button ion-button large (click)="doSomething()" item-end></button> 
    </ion-item> 

item-left und item-right Richtungseigenschaften werden nach veraltet zu https://ionicframework.com/docs/theming/rtl-support/