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"
                  :label="itselfStatus.node.tagValue.value"
                  :sublabel="itselfStatus.valid ? $t('OK') : $t('failed')"
    >
    ....
    </q-collapsible>
    

    0_1548058697243_collapsible-121161223154.jpg



  • @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:

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

Log in to reply