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"
/>
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!
Most helpful comment
New props (input-class, input-style) available in "quasar" v1.1.7.