CSS ionic - 在输入字段中添加一个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36195858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic - Adding a button inside a input field
提问by user3607282
I'm trying to add a button inside an <ion-input>but wherever I add it inside the <ion-list>the button does not show on the screen.
我正在尝试在一个按钮内添加一个按钮，<ion-input>但是无论我在哪里添加它<ion-list>，按钮都不会显示在屏幕上。
What I'm trying to do is to show a button "Forgot" on top of the password field aligned to the right. Refer screen:
我想要做的是在右侧对齐的密码字段顶部显示一个“忘记”按钮。参考画面：
This is my HTML,
这是我的 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>
How do I achieve this layout in Ionic 2?
如何在 Ionic 2 中实现这种布局？
回答by user3607282
Fixed in the recent Ionic releases. Adding item-right on the button works.
在最近的 Ionic 版本中修复。在按钮上添加 item-right 有效。
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
<button clear item-right>Forgot</button>
</ion-item>
回答by DerBesondereEin
For ionic 4 it will look a bit different:
对于 ionic 4，它看起来有点不同：
<ion-item>
<ion-input type="password" placeholder="Password"></ion-input>
<button clear slot="end">Forgot</button>
</ion-item>
Instead of left and right they introduced start and end values, which make it easier to build interfaces for both left-to-right and right-to-left writing directions
他们引入了开始和结束值而不是左右，这使得为从左到右和从右到左书写方向构建界面变得更容易
回答by deanwilliammills
I have something similar, a disabled input with an enabled icon button next to the input. Here is my HTML:
我有类似的东西，一个禁用的输入，输入旁边有一个启用的图标按钮。这是我的 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>
So in you case, this will work:
所以在你的情况下，这将起作用：
<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-leftand item-rightdirectional properties are deprecated according to https://ionicframework.com/docs/theming/rtl-support/
item-left和item-right方向属性根据https://ionicframework.com/docs/theming/rtl-support/被弃用
回答by Oron Ben-David
try using flex:
尝试使用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>
回答by Anand Raja
Toggling the password visible on and off is simple in ionic 4.
在 ionic 4 中，打开和关闭密码可见很简单。
you have to mention the slot value as end (slot="end") to make the icon at end along with item-endproperty
您必须将插槽值提及为 end ( 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>
inside the component.ts file
在 component.ts 文件中
showPass:boolean = false;
