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

[flight9]

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>

[Narmer23]

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

[flight9]

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