Quasar: [v1] Change text color of QSelect inner QField

Created on 12 Jul 2019  路  3Comments  路  Source: quasarframework/quasar

Is your feature request related to a problem? Please describe.

When using a QSelect component, I want to set the color of the inner QField displaying the selected item label and icons. I expected the color prop to do this, and it seems to be adding the .text-<color_variable_name> class to the inner element of the internal QField, but that class is only affecting the label and the border (if any), and it's effective only when the QSelect is focused. I assume this is the expected behavior.

Describe the solution you'd like

Adding a prop to the QSelect (and maybe QField?) component to change the color of all text/icons inside its QField. I'm aware I can do that now by using the different slots available. I.e: If I want a QSelect with a prepended icon in which the color of said icon, the selected label, and the dropdown icon is primary, I can do something like this:

<q-select
    hide-dropdown-icon
    emit-value
    map-options
    label="Order By"
    stack-label
    v-model="currentSelectedOrder"
    :options="orderingOptions"
>
    <template #prepend>
        <q-icon name="sort" color="primary" />
    </template>
    <template #selected-item="{ opt }">
        <span class="text-primary">{{ opt.label }}</span>
    </template>
    <template #append>
        <q-icon name="arrow_drop_down" color="primary" />
    </template>
</q-select>

But I would find it useful to be able to have the same QSelect without redefining the slots. Let's name the prop to do this text-color, and the same QSelect could be achieved like this:

<q-select
    hide-dropdown-icon
    emit-value
    map-options
    label="Order By"
    stack-label
    v-model="currentSelectedOrder"
    :options="orderingOptions"
    text-color="primary"
/>
feature request

Most helpful comment

New props (input-class, input-style) available in "quasar" v1.1.7.

All 3 comments

You can extend this qselect, and reuse it whereever.

New props (input-class, input-style) available in "quasar" v1.1.7.

That's awesome. Thank you very much @rstoenescu!

Was this page helpful?
0 / 5 - 0 ratings