С помощью Quasar я пытаюсь поместить q-breadcrumb-el
в q-toolbar
.Однако текст «хлебная крошка» невидим, поскольку он того же цвета, что и фон панели инструментов (основной цвет темы).
Компоненты Quasar, предназначенные для использования на панели инструментов (например, q-toolbar-title
), отображают текст в контрастном цвете.правильно.Я могу жестко закодировать цвет в моем шаблоне, но это не удастся, если основной цвет темы изменится на светлый.
- Есть ли распространенная идиома, чтобы сказать что-то вроде "контрастирование с цветом фона" или "тот же цвет, что и текст в элементе xxx" в Quasar (или Vue, или ванильный CSS)?(То есть что-то, что просто знают все классные ребята?)
- Как я могу определить, как
q-toolbar-title
делает это?
<q-toolbar>
<q-toolbar-title>Wiki Page</q-toolbar-title> <!-- <== white text on primary color background -->
<q-breadcrumbs>
<q-breadcrumbs-el
v-for="section in sections"
:key="section.label"
:label="section.label"
:to="section.path"
class="text-white" <!-- <== works, but is fragile -->
></q-breadcrumbs-el>
</q-breadcrumbs>
</q-toolbar>