Display Inline-Label, Eingabefeld und Symbol/Schaltfläche in ionic 2

Question

Ich möchte Label und Eingabe auf der linken Seite der Reihe nach und Schaltfläche/Symbol auf der rechten Seite. Ich habe versucht, mit Raster, wie

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

Es es Inline-Display, aber das Eingabefeld geht etwas unter.

auch mit Element-Links und Element-rechts-Eigenschaften versucht. aber kann nicht tun.

Answer 1

Try this:

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

Sie werden wahrscheinlich sonst einige der CSS in den Elementen ion-grid haben außer Kraft zu setzen.

UPDATE Von ionic@3.4.0:

Danke für den Kommentar @keldar. Laut den Dokumenten sind directional propertiesitem-left und item--right veraltet und Sie müssten item-start und item-end verwenden, die sowohl rechts nach links als auch von links nach rechts unterstützen könnten.

<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

ionen Reihe hat mehrere Attribute (siehe Row). Die eine, die für Sie passend aussieht, ist align-items-center. So , können Sie dies versuchen:

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