Q-Tabs to use Bold font



  • Hi guys,

    I am trying to make the active tab to have bold font (and/or customized background color).

    For simplicity, I first tried to use text-weight-bold for q-tabs and style="font-weight: bold !important" for q-tab. But it doesn’t make the font bold.

    <q-tabs
            v-model="tab"
            class="bg-orange text-white shadow-2 text-weight-bold"
          >
            <q-tab name="mails" label="Mails" style="font-weight: bold !important"></q-tab>
            <q-tab name="alarms" label="Alarms"></q-tab>
            <q-tab name="movies" label="Movies"></q-tab>
    </q-tabs>
    

    Any idea how to make it bold? Then I will just handle making it bold when active.

    Fiddle:
    https://codepen.io/keechan/pen/WNxywOO

    Thanks!!



  • @keechan inpect element and target the class .q-tab__label ie.

    .bold-tabs
      .q-tab__label
        font-weight: bold
    

Log in to reply