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

否则，您可能必须覆盖ion-grid元素中的一些css。

来自ionic@3.4.0的更新：

感谢@keldar的评论。根据文档，directional properties 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>

Answer 2

ion-row有几个属性(参见Row)。看起来适合您的是align-items-center。所以，你可以试试这个：

    <ion-grid>
      <ion-row align-items-center>
       ...

Answer 3

如果你添加了新的列，这意味着这将是另一列，当你添加时，你没有未指定的这些列的尺寸。你可以插入一个离子项，在同一行上插入所有没有静态大小的东西。

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