更改 Bootstrap Vue 选项卡标题的标题颜色

Question

我将使用bootstrap-vue.js来创建一个标签页。结果如下所示： 我只想更改选项卡标题的颜色，因为它使用了我的项目默认颜色。从bootstrap-vue.js官方链接（https://bootstrap-vue.js.org/docs/components/tabs）中可以看到有一个title-item-class，可以用来更改选项卡标题的任何内容。所以我创建了以下代码：

<b-tab title="Transaction History" title-item-class="tab-title-class">

和我的CSS：

.tab-title-class {
    color: #FF0000 !important;  
}

但是它没有任何效果。那么问题在哪里呢？ 提前感谢。

- Maryadi Poipo

---

你的控制台里有任何警告吗？ - Naveen K

没有警告或错误提示 @Naveen - Maryadi Poipo

Answer 1

使用v-bind指令应用自定义类，并使用引号表示它是一个字符串：

<b-tab title="Transaction History" :title-item-class="'tab-title-class'">

:title-item-class 是 v-bind:title-item-class 的别名。

这是因为 Bootstrap Vue 使用的是 props 而不是简单的 HTML 属性。其中 title 只是一个 HTML 属性，你不需要使用 v-bind。

---

但我认为你需要应用 :title-link-class。因为链接标签被应用在那里。

<b-tab title="Transaction History" :title-link-class="'tab-title-class'">

在使用v-bind时，它会检查输入的类型。如果未定义，则会出现错误。因此，在这里，我们没有在data选项中定义这样的类，而只是为CSS分配了一个字符串类，这将正常工作。

- Bhojendra Rauniyar

---

我已经尝试过这个了。但是还是没有任何改变...颜色仍然是粉红色的.. @-@ - Maryadi Poipo

哦...等一下。当我输入时，出现了一个错误信息： - Maryadi Poipo

在 Bootstrap Vue 的示例中，我看到使用了 :title-link-class 而不是之前提到的方式。 - Bhojendra Rauniyar

你能否先尝试应用这个类bg-primary来检查它是否有效。 - Bhojendra Rauniyar

谢谢... :title-link-class 正常工作... 非常感谢尼泊尔先生 Bhojendra.. B-) - Maryadi Poipo

Answer 2

如果您在同一模板中使用以下样式，则：

<style>
.tab-title-class {
    color: #FF0000 !important;  
}
</style>

这将在您的控制台中显示警告，如下所示：

"[Vue warn]: 模板应仅负责将状态映射到 UI。避免在模板中放置具有副作用的标记，如< style >。"

而这些样式是不被解析的。

请在某些外部 CSS 中使用此样式以使其生效。

还要使用 v-bind 来绑定类。

<b-tab title="Transaction History" :title-item-class="tab-title-class">

- Naveen K

---

我得到了这个错误信息：“无效的属性：对于属性“titleItemClass”的类型检查失败。期望字符串、数组、对象，但得到了数字。” - Maryadi Poipo

Answer 3

看起来您在title-item-class之前缺少了一个冒号。尝试使用<b-tab title="Transaction History" :title-item-class="tab-title-class">

- Dhruv Murarka

---

我已经尝试过这个了。但是还是没有任何改变...颜色仍然是粉红色的.. @-@ - Maryadi Poipo