`item-right`在`ion-col`的按钮元素内不起作用

时间：2017-04-05 08:14:40

标签： html css angular ionic2

我想在列分区的右侧显示name="ios-navigate"（在波纹管图像中显示为navigation icon）。我已将item-right属性赋予了button元素＆＃39; ion-col＆＃39;但它不起作用。

目前正在展示，

enter image description here 

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

1 个答案:

答案 0 :(得分：0)

查看基于flexbox的最新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>
相关问题
最新问题