How to control the sublabel color of `q-collapsible`?

  • I would like to change the sublabel color of q-collapsible and control it by a varible.

    I only found there is a property header-class="text-red" which can control the label color, but not the sublabel.

    My code is like this:

    <q-collapsible icon="fa fa-square"
                  :sublabel="itselfStatus.valid ? $t('OK') : $t('failed')"


  • @flight9 You can use the Header slot to fully customize the header. JSFiddle as an example.

  • @Narmer23 thanks, I found solution, here are some codes for others to ref later:

                    <template slot="header">
                      <q-item-side icon="fa fa-square" />
                        <q-item-tile :label="true">
                          {{ itselfStatus.node && itselfStatus.node.tagValue.value }}
                        <q-item-tile :sublabel="true" :color="itselfStatus.valid ? 'positive' : 'negative'" >
                          {{ itselfStatus.valid ? $t('OK') : $t('failed') }}
                        {{ !itselfStatus.valid && itselfStatus.forcible ? 'forcible': ''}}

Log in to reply