Ionic2/3 - 标题按钮图标的大小与自动后退按钮不同答案

【问题标题】：Ionic2/3 - header button icon has different size then auto back buttonIonic2/3 - 标题按钮图标的大小与自动后退按钮不同
【发布时间】：2018-02-02 08:17:10
【问题描述】：

我在使用 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）：

也许我应该使用不同的按钮类或组件？如何使标题中所有按钮和图标的大小相同？

【问题讨论】：

标签： angular ionic-framework sass ionic2 ionic3

【解决方案1】：

您可以使用仅图标指令，仅此而已。这种方式是返回按钮。

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

【讨论】：

这实际上是解决问题的最离子的方式。 +1

【解决方案2】：

您只需要增加icon的font-size，如下所示。

注意：因此您在页面的scss 文件中执行此操作，它不会破坏任何其他默认样式。

your-page.scss

.icon[name="arrow-forward"] {
        font-size: 2.4rem;; //same size of the default back button
    }

结果：

【讨论】：

【解决方案3】：

为您的图标添加next-button 类。

<ion-icon name="arrow-forward" class="next-button"></ion-icon>

请参阅 ionic 源代码以获取准确的 CSS rules for the back button。然后相应地添加您的自定义样式。

ion-icon.next-button.icon-ios {
    min-width: 18px;
    font-size: 3.4rem;
    padding-left: inherit;
    text-align: right;    
    display: inline-block;
}

ion-icon.next-button.icon-md {  
    margin: 0;
    padding: 0 6px;
    text-align: right;   
    font-size: 2.4rem;
    font-weight: normal;
}

【讨论】：