Ionic 4:如何为选定的 ion-tab-button 设置边框?
Ionic 4: How to set border to the selected ion-tab-button?
我尝试应用以下 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>
像这样使用ion-segment。它看起来像一个标签按钮。
<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>
我发现应用 box-shadow
而不是 border
有效。
ion-tab-button[aria-selected=true] {
box-shadow: 0 2px 0 0 blue inset;
}
我尝试应用以下 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>
像这样使用ion-segment。它看起来像一个标签按钮。
<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>
我发现应用 box-shadow
而不是 border
有效。
ion-tab-button[aria-selected=true] {
box-shadow: 0 2px 0 0 blue inset;
}