Tab indicator color

[chupins]

I'll like to be able to change the color of the selected tab indicator as it's showed in quasar :

<q-tabs
  v-model="tab"
  indicator-color="purple"
  class="text-teal"
>

(https://codepen.io/pen?&editors=101)

I don't find what key world use to do it in :

ui.tab(...).style(???)

Thanks by advance

[falkoschindler]

Hi @chupins,

You can use the "indicator-color" prop like this:

with ui.tabs().props('indicator-color=purple') as tabs:
    one = ui.tab('One')
    two = ui.tab('Two')

[chupins]

Thank you, i didn't saw that it's a property of ui.tabs and not ui tab !
Then, I guess that I can't have a different indicator color for each tab ?

[falkoschindler]

You can set different tab colors which, however, changes the text color as well:

with ui.tabs() as tabs:
    one = ui.tab('One').classes('text-blue')
    two = ui.tab('Two').classes('text-red')

We can enforce a common text color with some custom CSS:

ui.add_css('''
    .my-tabs .q-tab__label {
        color: black !important;
    }
''')

with ui.tabs().classes('my-tabs') as tabs:
    one = ui.tab('One').classes('text-blue')
    two = ui.tab('Two').classes('text-red')

[chupins]

Thank you, that's working perfectly for me 👍