ionic - добавление кнопки внутри поля ввода

Question

Я пытаюсь добавить кнопку внутри <ion-input>, но везде, где я добавляю ее внутри <ion-list>, кнопка не отображается на экране.

Что я пытаюсь сделать, так это показать кнопку «Забыл» над полем пароля, выровненным вправо. См экран:

Это мой 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> 

Как добиться этого макета в ионическом 2?

Answer 1

Исправлено в недавнем ионического релизы. Добавляется элемент справа от кнопки.

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

Answer 2

попробовать с помощью 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> 

Answer 3

У меня есть что-то подобное, отключенный ввод с кнопкой со значком включен рядом с входом. Вот мой 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> 

Так в вас случае, это будет работать:

<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 и item-right Направленные свойства являются устаревшими в соответствии с https://ionicframework.com/docs/theming/rtl-support/