Question

使用Quasar，我试图将q-breadcrumb-el放在q-toolbar内。但是，面包屑文本是不可见的，因为它与工具栏的背景颜色相同（主题原色）。
意在工具栏中使用的类星体组件（例如q-toolbar-title）以正确对比的颜色呈现文本。我可以在模板中对颜色进行硬编码，但是如果将主题原色更改为浅色，则将失败。

在Quasar（或Vue或香草CSS）中，是否有一个常见的成语来表达诸如“与背景色形成对比”或“与xxx元素中的文本相同的颜色”？（即所有酷孩子都知道的东西？）
如何确定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>

Answer 1

如果我想要你的意思。

添加CSS text-stroke属性，颜色应仅为黑色或白色。以便区分文本颜色和工具栏颜色。

<q-toolbar>
  <q-toolbar-title>Wiki Page</q-toolbar-title>  <!-- <== white text on primary color background -->
  <q-breadcrumbs style="font-size: 20px;-webkit-text-stroke: 0.4px black;">
    <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>

如何获得文本颜色来对比其容器？

1 个答案:

如果我想要你的意思。