Ionic 4：如何为选定的 ion-tab-button 设置边框？答案

【问题标题】：Ionic 4: How to set border to the selected ion-tab-button?Ionic 4：如何为选定的 ion-tab-button 设置边框？
【发布时间】：2019-09-23 17:17:12
【问题描述】：

我尝试应用以下 css 但没有成功。

*.scss

ion-tab-button[aria-selected=true] {
   border-top: 1px solid blue;
}

*.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
    </ion-tab-button>
    ...
    <ion-tab-button tab="about">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

【问题讨论】：

标签： ionic4 ionic-tabs

【解决方案1】：

像这样使用离子段。它看起来像一个标签按钮。

<ion-footer>
  <ion-toolbar>
    <ion-segment>
      <ion-segment-button value="all" checked>
        All
      </ion-segment-button>
      <ion-segment-button value="favorites">
        Favorites
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-footer>

【讨论】：

【解决方案2】：

我发现应用 box-shadow 而不是 border 有效。

ion-tab-button[aria-selected=true] {
  box-shadow: 0 2px 0 0 blue inset;
}

【讨论】：