“itemright”不是“ion-col”的按钮元素

I want to display name="ios-navigate" (which is showing as a navigation icon in bellow image) right side in the column partition. I have given item-right attribute to the button element inside 'ion-col' but its not working.

我想要显示name="ios- navigation "(在bellow image中显示为一个导航图标)在列分区中的右侧。我已经将itemright属性赋予了“ion-col”中的按钮元素，但它不起作用。

Its currently displaying bellow,

目前显示波形,

<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 个解决方案

#1

Check out the latest ion-grid API based on flexbox. width-* is deprecated for col-*. Also item-left and item-right attributes work for ion-item elements. You need to use row attributes.Try justify-content-end to align horizontally right.

查看基于flexbox的最新的ion-grid API。宽度* *被弃用为col-*。还有itemleft和itemright属性为ion-item元素工作。您需要使用行属性。尝试在水平方向上对齐。

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