首页 文章

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

提问于
浏览 次
2

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

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

enter image description here

我试着用这样的超级标签来获取它

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

结果将是

enter image description here

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

ionic3

2 回答

  • 0

    Need to change .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>

    And also need to override $segment-button-md-height in variable.scss like

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

    Output:

    output

    回复于
  • 7

    你需要做这样的事情

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

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

    它是经过测试和尝试的方法 .

    回复于

相关问题