带有图标和文本的离子段按钮，以制作类似标签栏答案

【问题标题】：Ionic segment button with icon and text to make like tab bar带有图标和文本的离子段按钮，以制作类似标签栏
【发布时间】：2018-03-22 17:36:29
【问题描述】：

我尝试用图标和文本（如标签栏）实现离子段按钮，但有所不同。到目前为止我已经尝试过什么

<ion-footer>
  <ion-segment style="background:#3B6593">
    <ion-segment-button style="color:white">
      <ion-icon name="home"></ion-icon>
      Heizöl
    </ion-segment-button>
    <ion-segment-button value="diesel_10" style=color:white>
      <ion-icon name="home"></ion-icon>
      Diesel
    </ion-segment-button>
    <ion-segment-button value="benzin_e5" style=color:white>
      <ion-icon name="home"></ion-icon>
      Benzin E5
    </ion-segment-button>
    <ion-segment-button value="benzin_e10" style=color:white>
      <ion-icon name="home"></ion-icon>
      Benzin E10
    </ion-segment-button>
    <ion-segment-button value="benzin_e10" style=color:white>
      <ion-icon name="home"></ion-icon>
      Benzin E10
    </ion-segment-button>
  </ion-segment>
</ion-footer>

我已经尝试用这样的超级标签来获得它

<ion-footer>
    <super-tabs toolbarColor="light">
        <super-tab [root]="tab1Root" title="Home" icon="home"></super-tab>
        <super-tab [root]="tab2Root" title="Uneverasalseite" icon="ios-globe"></super-tab>
        <super-tab [root]="tab3Root" title="News" icon="logo-designernews"></super-tab>
        <super-tab [root]="tab4Root" title="Tickcharts" icon="ios-stats"></super-tab>
        <super-tab [root]="tab5Root" title="RPI" icon="ios-pulse"></super-tab>
      </super-tabs>
</ion-footer>

结果是

但在这里我需要设置样式，这很难降低标签栏高度和调整文本大小。

【问题讨论】：

澄清你的问题。你喜欢标签栏是什么意思？
是的，我想获得标签页，实际上我有侧边菜单和标签页。我想在我无法获得的每个页面中保留标签栏，所以我尝试使用离子段来获得类似的东西。是否有可能得到它的离子段。
是的，有可能

标签： ionic3

【解决方案1】：

需要改.html

<ion-footer>
    <ion-segment style="background:#3B6593">
      <ion-segment-button style="color:white" icon-left>
        <ion-icon name="home"></ion-icon>
        <div style="margin-top: -20px !important; ">
          Heizöl
        </div>
      </ion-segment-button>
      <ion-segment-button value="diesel_10" style=color:white>
        <ion-icon name="home"></ion-icon>
        <div style="margin-top: -20px !important; ">
          Diesel
        </div>

      </ion-segment-button>
      <ion-segment-button value="benzin_e5" style=color:white>
        <ion-icon name="home"></ion-icon>
        <div style="margin-top: -20px !important; ">
          Benzin E5
        </div>
      </ion-segment-button>
      <ion-segment-button value="benzin_e10" style=color:white>
        <ion-icon name="home"></ion-icon>
        <div style="margin-top: -20px !important; ">
          Benzin E10
        </div>
      </ion-segment-button>
      <ion-segment-button value="benzin_e10" style=color:white>
        <ion-icon name="home"></ion-icon>
        <div style="margin-top: -20px !important; ">
          Benzin E10
        </div>
      </ion-segment-button>
    </ion-segment>
  </ion-footer>

并且还需要覆盖 variable.scss 中的$segment-button-md-height 之类的

$segment-button-md-height:55px;

输出：

【讨论】：

感谢您的快速回复，我已尝试您的 sn-p 我无法在图标下显示文字。我也增加了按钮高度。
$segment-button-md-height:60px;在 variable.scss App Material Design Variables 部分声明
但是标签栏非常高。如果我将高度从 75px 降低到 55px，文本就会消失。
是的，你需要像 margin-top:-20px;和 $segment-button-md-height:55px;
是的，但这里我还有一个问题，我在其他页面中也有段。我不能在 variables.scss 中声明它。

【解决方案2】：

你需要做这样的事情

<ion-segment-button style="color:white">
    <ion-icon name="custom_name_of_icon"></ion-icon>
      Heizöl
</ion-segment-button>

然后在浏览器中进行离子服务后检查元素。一个与该元素关联的新类将会出现。然后在效果之后或之前使用 css，您将把图像放在自定义图标上。

这是经过测试和尝试的方法。

【讨论】：