离子段按钮带有图标和文字,使标签栏

Question

我尝试使用图标和文本来实现离子段按钮,如标签栏,但有所不同.到目前为止我尝试过的

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

结果将是

但在这里我需要设计风格,很难减少标签栏高度和调整文字大小.

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

并且还需要$segment-button-md-height在variable.scss中重写

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

输出: