TabView horizontal highlighted line color on iOS


I’m looking for a css property that changes the color of highlighted horizontal line color which appears under a selected tab in TabView. According to this: - you change the color in android using the android-selected-tab-highlight-color, and it works perfectly, but how it is done in iOS?


unfortunately as of now this is only supported for android. see the full set of available properties here

based on the link you shared, doing it for iOS may requires internal hacks that could possibly ban the app


Maybe this solution will help.

In template:

<GridLayout rows="*,2" columns="*,*,*">
    <TabView rowSpan="2" colSpan="3" tabBackgroundColor="#6E7AFA" androidTabsPosition="bottom" iosIconRenderingMode="alwaysOriginal" (selectedIndexChanged)="tabViewIndexChange($event)">
        <page-router-outlet *tabItem="homeTab" name="homeTab"></page-router-outlet>
        <page-router-outlet *tabItem="createTab" name="bookingCreateTab"></page-router-outlet>
        <page-router-outlet *tabItem="settingsTab" name="settingsTab"></page-router-outlet>

        <Label *ngIf="selectedIndex == 0" row="1" col="0" backgroundColor="#FFF"></Label>
        <Label *ngIf="selectedIndex == 1" row="1" col="1" backgroundColor="#FFF"></Label>
        <Label *ngIf="selectedIndex == 2" row="1" col="2" backgroundColor="#FFF"></Label>

In component:

homeTab: any;
createTab: any;
settingsTab: any;
selectedIndex = 0;

constructor() {

tabViewIndexChange(args) {
    this.selectedIndex = args.newIndex;

setDefultTabTitles() {
    this.homeTab  = { title: "Test 1" };
    this.createTab  = { title: "Test 2" };
    this.settingsTab  = { title: "Test 3" };