顯示離線中的內嵌標籤，輸入框和圖標/按鈕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

回答

相關問題