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>

如何在 Ionic 2 中實現這種布局？

Answer 1

在最近的 Ionic 版本中修復。 在按鈕上添加 item-right 有效。

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

Answer 2

對於 ionic 4，它看起來有點不同：

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

他們引入了開始和結束值而不是左右，這使得為從左到右和從右到左書寫方向構建界面變得更容易

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>

根據https://ionicframework.com/docs/theming/rtl-support/不推薦使用item-left和item-right方向屬性

Answer 4

嘗試使用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 5

在 ionic 4 中，打開和關閉密碼可見很簡單。

您必須將槽值提及為 end ( slot="end" ) 以使圖標位於 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;