ionic - 在输入字段中添加按钮

Question

我试图在 @*<p> @Html.ActionLink("Create New", "Create") </p>*@ <h3>User Activity</h3> @using (Html.BeginForm("index", null, FormMethod.Get)) { <div class="row"> <div class="col-sm-8"> <div class="input-group"> <input type="text" name="filter" value="@ViewBag.filter" class="form-control" style="display: inline" placeholder="Search by Contact Id" /> <span class="input-group-btn"> <button class="btn btn-default" type="submit">Go</button> </span> </div> </div> <div class="pull-right col-lg-1"> <a class="btn btn-success" data-modal="" href="/UserActivity/Create" id="btnCreate"> <span class="glyphicon glyphicon-plus"></span> </a> </div> </div> <div class="table-responsive" style="margin-top:5px;"> @{ var grid = new WebGrid( Model, canPage: true, rowsPerPage: 5, canSort: true); //ajaxUpdateContainerId: "grid"); //grid.Bind(Model, rowCount: (int)ViewData["totalCount"], autoSortAndPage: false); grid.Pager(WebGridPagerModes.All); @grid.GetHtml( //htmlAttributes: new { id = "grid" }, // id for ajaxUpdateContainerId parameter fillEmptyRows: false, tableStyle: "table table-striped", mode: WebGridPagerModes.All, columns: grid.Columns( //grid.Column("Id", "Id"), grid.Column("Id", "Id", style: "col-lg-1", canSort: true), grid.Column("CreatedBy", "CreatedBy", style: "col-lg-6"), grid.Column("CreatedOn", header: "CreatedOn", style: "col-lg-2", canSort: true), grid.Column("ModifiedBy", header: "ModifiedBy", style: "col-lg-2"), grid.Column("ModifiedOn", header: "ModifiedOn", style: "col-lg-2"), grid.Column("ContactId", header: "ContactId", style: "col-lg-2"), grid.Column("EntityName", header: "EntityName", style: "col-lg-2"), grid.Column("EntityId", header: "EntityId", style: "col-lg-2"), grid.Column("ActivityType", header: "ActivityType", style: "col-lg-2"), grid.Column("ActivityStatus", header: "ActivityStatus", style: "col-lg-2"), grid.Column("DueDate", header: "DueDate", style: "col-lg-2"), grid.Column("ActualEndDate", header: "ActualEndDate", style: "col-lg-2"), grid.Column("MasqueradeOn", header: "MasqueradeOn", style: "col-lg-2"), grid.Column("MasqueradeBy", header: "MasqueradeBy", style: "col-lg-2"), grid.Column(header: "Action", canSort: false, style: "action", format: @<text> @Html.Raw("<a data-modal='' href='/UserActivity/Details/" + item.Id + "' id='" + item.Id + "' title='Detail'> <span class='glyphicon glyphicon-search'> </span> </a>") @Html.Raw("<a data-modal='' href='/UserActivity/edit/" + item.Id + "' id='" + item.Id + "' title='Edit'> <span class='glyphicon glyphicon-edit'> </span> </a>") @Html.Raw("<a data-modal='' href='/UserActivity/delete/" + item.Id + "' id='" + item.Id + "' title='Delete'> <span class='glyphicon glyphicon-trash'> </span> </a>") </text>) )); } </div> } 内添加一个按钮，但无论我在<ion-input>内添加按钮，屏幕上都不会显示该按钮。

我要做的是显示一个按钮＆＃34; Forgot＆＃34;在右侧对齐的密码字段之上。参考屏幕：

这是我的HTML，

<ion-list>

如何在Ionic 2中实现此布局？

Answer 1

在最近的Ionic版本中修复。在按钮上添加项目权限。

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

Answer 2

我有类似的东西，一个禁用的输入，输入旁边有一个启用的图标按钮。 这是我的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/

弃用

Answer 3

尝试使用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 4

对于离子4，它看起来会有所不同：

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

他们引入了开始值和结束值，而不是左右值，这使构建从左至右和从右至左书写方向的界面更加容易

Answer 5

在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;