`item-right`が` ion-col`のボタン要素の中で機能していません

Question

name="ios-navigate"（下の図のnavigation iconとして表示されます）を右側に表示します。私はitem-right属性を 'ion-col'の中のbutton要素に与えましたが、機能しません。

その現在、怒鳴る表示、

<ion-item> 
    <ion-row> 
     <ion-col width-33> 
     <button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear item-right (click)="RedirectWebsite(item.Website)"> 
      <ion-icon name="md-globe" item-left large></ion-icon> 
      WWW 
     </button> 
     </ion-col> 
     <ion-col width-33> 
     <button ion-button icon-left clear item-right [disabled]="!item.Phone" (click)="dialNumber(item.Phone)"> 
      <ion-icon name="md-call" color="primary" item-left large></ion-icon> 
      Phone 
     </button> 
     </ion-col> 
     <ion-col width-33> 
     <button ion-button item-right icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)"> 
      <ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon> 
     </button> 
     </ion-col> 
    </ion-row> 
</ion-item> 

Answer 1

フレキシボックスに基づいて、最新のion-grid APIをチェックしてください。 width-*はcol-*で非推奨です。また、item-leftとitem-rightの属性は、ion-item要素で機能します。 row attributesを使用する必要があります。右に水平に整列するにはjustify-content-endにお試しください。

<ion-row justify-content-end> 
     <ion-col col-4> 
     <button style="padding: 0px 0px;" [disabled]="!item.Website" ion-button icon-left clear (click)="RedirectWebsite(item.Website)"> 
      <ion-icon name="md-globe" item-left large></ion-icon> 
      WWW 
     </button> 
     </ion-col> 
     <ion-col col-4> 
     <button ion-button icon-left clear [disabled]="!item.Phone" (click)="dialNumber(item.Phone)"> 
      <ion-icon name="md-call" color="primary" item-left large></ion-icon> 
      Phone 
     </button> 
     </ion-col> 
     <ion-col col-4> 
     <button ion-button icon-left clear (click)="GetRoute(item.geometry.location.lat,item.geometry.location.lng)"> 
      <ion-icon icon-right name="ios-navigate" color="primary" large></ion-icon> 
     </button> 
     </ion-col> 
    </ion-row>