web-dev-qa-db-fra.com

ionic - Ajout d'un bouton dans un champ de saisie

J'essaie d'ajouter un bouton dans un <ion-input>, mais partout où je l'ajoute dans le <ion-list>, le bouton n'apparaît pas à l'écran. 

Ce que j'essaie de faire est d'afficher un bouton "oublié" en haut du champ de mot de passe aligné à droite. Se référer à l'écran:

 enter image description here

C'est mon HTML,

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

Comment réaliser cette mise en page dans Ionic 2?

cssionic2iconic
8
user3607282

Corrigé dans les dernières versions d'Ionic. L'ajout d'item à droite sur le bouton fonctionne.

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

J'ai quelque chose de similaire, une entrée désactivée avec un bouton d'icône activé à côté de l'entrée . Voici mon code HTML:

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

Donc dans votre cas, cela fonctionnera:

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

Les propriétés directionnelles item-left et item-right sont obsolètes en fonction de https://ionicframework.com/docs/theming/rtl-support/

3
deanwilliammills

essayez d'utiliser flex:

 <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>
1
Oron Ben-David