ionic - 在输入字段中添加一个按钮
ionic - Adding a button inside a input field
我正在尝试在 <ion-input>
中添加一个按钮,但是无论我在 <ion-list>
中添加什么按钮,该按钮都不会显示在屏幕上。
我想要做的是在密码字段顶部显示一个按钮 "Forgot",并右对齐。参考屏幕:
这是我的 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 中实现这种布局?
尝试使用 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>
已在最近的 Ionic 版本中修复。在按钮上添加 item-right 有效。
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
<button clear item-right>Forgot</button>
</ion-item>
我有类似的东西,一个禁用的输入,输入旁边有一个启用的图标按钮。
这是我的 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/
弃用
对于 ionic 4,它看起来会有点不同:
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
<button clear slot="end">Forgot</button>
</ion-item>
他们引入了开始值和结束值,而不是左值和右值,这使得为 left-to-right 和 right-to-left 书写方向构建界面变得更加容易
在 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;
我正在尝试在 <ion-input>
中添加一个按钮,但是无论我在 <ion-list>
中添加什么按钮,该按钮都不会显示在屏幕上。
我想要做的是在密码字段顶部显示一个按钮 "Forgot",并右对齐。参考屏幕:
这是我的 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 中实现这种布局?
尝试使用 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>
已在最近的 Ionic 版本中修复。在按钮上添加 item-right 有效。
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
<button clear item-right>Forgot</button>
</ion-item>
我有类似的东西,一个禁用的输入,输入旁边有一个启用的图标按钮。 这是我的 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/
对于 ionic 4,它看起来会有点不同:
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
<button clear slot="end">Forgot</button>
</ion-item>
他们引入了开始值和结束值,而不是左值和右值,这使得为 left-to-right 和 right-to-left 书写方向构建界面变得更加容易
在 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;