角度 – Ionic2 / 3 – 标题按钮图标具有不同的大小然后自动后退

发布时间：2020-12-17 07:12:14 所属栏目：安全来源：网络整理

导读：我在使用NavController时正在使用Ionic的2/3自动按钮. 在其中一个页面上,我想在标题中添加按钮,这会改变一些内容,所以我添加了它： ion-header ion-navbar color="orange" ion-titleTest/ion-title ion-buttons end button ion-button icon-right clear (cli

我在使用NavController时正在使用Ionic的2/3自动按钮.

在其中一个页面上,我想在标题中添加按钮,这会改变一些内容,所以我添加了它：

<ion-header>
  <ion-navbar color="orange">
    <ion-title>Test</ion-title>
    <ion-buttons end>
      <button ion-button icon-right clear (click)="openModal()">
        Next <ion-icon name="arrow-forward"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

不幸的是,图标的大小略有不同(较小),然后由Ionic自动添加后退按钮.
我知道我可以用CSS来设置它,但我害怕破坏它(我无法测试所有设备).

屏幕截图(Android和iOS)：

right button's icon is smaller then back icon

same for iOS

也许我应该使用不同的按钮类或组件？
如何制作所有按钮的尺寸&标题中的图标是一样的吗？

解决方法

你可以使用icon-only指令,这就是全部.这种方式是后退按钮.

<ion-buttons end>
   <button ion-button icon-right icon-only clear (click)="openModal()">
      Next <ion-icon name="arrow-forward"></ion-icon>
   </button>
</ion-buttons>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!