首页 文章

更改bootstrap vue选项卡 Headers 的 Headers 颜色

提问于
浏览 次
0

我正在使用bootstrap-vue.js创建一个标签 . 结果是这样的
enter image description here

我只想更改标签 Headers 颜色，因为它使用了我项目中的默认颜色 . 并且从bootstrap-vue.js官方链接（https://bootstrap-vue.js.org/docs/components/tabs）中有一个title-item-class，用于在标签 Headers 中进行任何更改 . 所以我像这样编写代码：

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

和我的css：

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

但它没有产生任何影响 . 那么这里的问题是什么？提前致谢 .

javascript vue.js

3 回答

  • 0

    使用 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 时，它会检查输入的类型 . 如果那是未定义的，那么你_1163113_在 data 选项中定义了这样的类，但只是为css分配了一个字符串类，它可以正常工作 .

    回复于
  • 0

    看起来你在 title-item-class 之前错过了冒号 . 试试 <b-tab title="Transaction History" :title-item-class="tab-title-class">

    回复于
  • 1

    如果你在同一个模板中使用样式，如下所示，

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

    这将在您的控制台中显示警告，例如

    “[Vue警告]：模板应该只负责将状态映射到UI . 避免在模板中放置带副作用的标签，例如<style> . ”

    并且不解析那些样式 .

    在一些外部CSS中使用这种风格来工作 .

    也为该类使用v-bind

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

相关问题