css - 更改标签栏高度

Question

修改标签栏高度的最佳方法是什么(见下文)？同时确保导航栏和内容不会发生重叠，并且选项卡元素垂直居中。

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="Home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">
    <!-- Tab 1 content -->
  </ion-tab>

  <ion-tab title="About" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
    <!-- Tab 2 content -->
  </ion-tab>

  <ion-tab title="Settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline">
    <!-- Tab 3 content -->
  </ion-tab>

</ion-tabs>

Answer 1

经过更多研究，我想我找到了一种方法，可以覆盖 _variables.scss 中的变量。

我的自定义 sass 文件 看起来像这样，并且正在覆盖 _variables.scss 中的值。

$tabs-height:                     49px !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";