显示离线中的内嵌标签，输入框和图标/按钮2

我想在左侧顺序显示标签和输入，在右侧显示按钮/图标。我已经用电网尝试作为显示离线中的内嵌标签，输入框和图标/按钮2

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

它显示的是内联，但输入框略低于去。

也尝试使用物品左侧和物品右侧属性。但无法做到。

来源

2017-02-23 Bharat

试试这个：

<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否则元素。

UPDATE从[email protected]：

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

来源

2017-02-23 13:16:58

只要注意，因为[email protected]的，属性'项目，left'和'项目，right'现在'项目，start'和'项端'分别。 :) – keldar

@keldar谢谢,,更新解决方案 –

pickContactNo（）似乎没有触发。 :([email protected] – wye

离子行有几个属性（见Row）。看起来适合你的那个是align-items-center。所以，你可以试试这个：

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

来源

2017-02-27 12:03:33

显示离线中的内嵌标签，输入框和图标/按钮2

回答

相关问题