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>

还需要覆盖variable.scss中的$segment-button-md-height，例如

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

<强>输出：

Answer 2

你需要做这样的事情

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

然后在浏览器中离子发送后检查元素。将会出现与该元素相关联的新类。然后在效果之前或之后用css将图像放在自定义图标上。

经过测试和试用的方法。

带有图标和文字的离子段按钮，可以像标签栏一样

2 个答案: