离子2中显示内联标签,输入框和图标/按钮

Question

我想依次在左侧显示标签和输入,在右侧显示按钮/图标.我尝试过使用网格作为

<ion-grid>
  <ion-row>
    <ion-col width-10>
        <ion-icon name="phone-portrait"></ion-icon>
    </ion-col>
    <ion-col width-70>
        <ion-input type="text" placeholder="Mobile no"></ion-input>
    </ion-col>
    <ion-col width-10>
          <ion-icon name="contacts" (click)="pickContactNo()"></ion-icon>
    </ion-col>
  </ion-row>
</ion-grid>

它显示内联,但输入框略低于此.

还尝试使用item-left和item-right属性.但是无法做到.

Answer 1

试试这个:

<ion-item>
  <ion-icon item-left name="phone-portrait"></ion-icon>
  <ion-input type="text" placeholder="Mobile no"></ion-input>
  <ion-icon item-right name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>

您可能必须覆盖其他元素中的某些css ion-grid.

更新来自ionic@3.4.0:

感谢@keldar的评论.根据文档,方向属性 item-left和item--right不推荐使用,你需要使用item-start,item-end并允许支持从右到左和从左到右.

<ion-item>
  <ion-icon item-start name="phone-portrait"></ion-icon>
  <ion-input type="text" placeholder="Mobile no"></ion-input>
  <ion-icon item-end name="contacts" (click)="pickContactNo()"></ion-icon>
</ion-item>