更改 bootstrap vue 选项卡标题的标题颜色 [英] Change title color of bootstrap vue tab title

问题描述

我正在使用 bootstrap-vue.js 创建一个选项卡.结果是这样的

I'm using bootstrap-vue.js to create a tab. The result is like this

我只想更改选项卡标题颜色，因为它使用的是我项目中的默认颜色.并来自 bootstrap-vue.js 官方链接(https://bootstrap-vue.js.org/docs/components/tabs) 有一个 title-item-class 用于对标签标题进行任何更改.所以我把代码写成这样:

I just want change the tab title color because it's using default color from my project. And from the bootstrap-vue.js official link (https://bootstrap-vue.js.org/docs/components/tabs) there is a title-item-class for making any change in the tab title. So I crate the code like this :

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

和我的 css :

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

但是没有任何效果.那么这里的问题是什么?提前致谢.

But it doesn't give any effect. So what is the problem here ? Thanks in advance.

推荐答案

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

Use v-bind directive to apply the custom class and also use a quote to denote it's a string:

<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.

It's because bootstrap vue uses props not simple html attributes. Where title is simply the html attribute and you don't need to use v-bind.

但我认为，你需要应用:title-link-class.这是因为在那里应用了链接标签.

But I think, you need to apply :title-link-class. It's because link tag is being applied there.

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

在使用 v-bind 时，它会检查输入的类型.如果未定义，则会出现错误.所以，这里我们没有在 data 选项中定义这样的类，而是简单地为 css 分配一个字符串类，这样就可以正常工作了.

While using v-bind, it checks for the types for the input. If that is undefined, then you'll get error. So, here we don't have such class defined in the data option but simply assigning a string class for css which will work fine.

这篇关于更改 bootstrap vue 选项卡标题的标题颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！