web-dev-qa-db-ja.com

ionic-入力フィールド内にボタンを追加する

<ion-input>内にボタンを追加しようとしていますが、<ion-list>内のどこに追加しても、ボタンは画面に表示されません。

私がやろうとしていることは、パスワードフィールドの上に右に位置合わせされたボタン「Forgot」を表示することです。参照画面：

enter image description here

これは私の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>

Ionic 2でこのレイアウトを実現するにはどうすればよいですか？

cssionic2iconic
9
user3607282

最近のIonic=リリースで修正されました。ボタンにアイテムの権利を追加すると機能します。

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

入力の横にアイコンボタンが有効になっている無効な入力があります。これが私の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/ に従って廃止されました

3
deanwilliammills

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

ionic 4の場合、少し異なります。

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

左と右の代わりに、開始値と終了値を導入しました。これにより、左から右と右から左の両方の書き込み方向のインターフェイスを簡単に構築できます

1
DerBesondereEin

ionic 4。

slot="end"プロパティとともにアイコンを最後に作成するには、スロット値を末尾（item-end）として指定する必要があります

<ion-item>
   <ion-label position="floating">Password</ion-label>
     <ion-input type="{{showPass ? 'text' : 'password'}}"></ion-input>
     <ion-icon item-end slot="end" name="{{showPass ? 'eye' : 'eye-off'}}" (click)="showPass=!showPass"></ion-icon>
</ion-item>

component.tsファイル内

showPass:boolean = false;
0
Anand Raja