如何在Quasar Tab中更改标签的字体粗细和字体大小

Question

我在我的项目中使用 Q-Tab，我试图更改选项卡标签的字体大小和字体粗细，但我无法更改。我在 quasar 中尝试了排版，但它们仍然没有用。

<q-tabs
  v-model="tab"
  dense
  class="text-weight-bold"
  active-color="purple"
  indicator-color="purple"
  align="justify"
  narrow-indicator
>
    <q-tab :ripple="false" name="devices" label="Mail"/>
    <q-tab :ripple="false" name="device-data" label="Alarms" />
    <q-tab :ripple="false" name="user-roles" label="Movies" />
</q-tabs>`

我应该怎么做才能更改字体大小并使它们全部变为粗体？

Answer 1

而不是使用

api label of q-tab

.

这样做

<q-tab>Mail<q-tab>

通过这样做，您可以通过 3 种方式更改它的字体粗细、字体大小以及所有内容。

1. by defining class name

class="tab"

并设计风格

.tab{
  font-size: 20px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

2. 直接在q-tab中样式

style="font-size:20px; font-weight:normal;"

3. 使用类星体排版

class= "text-subtitle2 text-weight-thin"