ant-design中取消tab激活时候的下划线、以及修改tab激活时候下划线颜色
git上看到的记载下写在当前vue文件样式中不添加scoped属性才会生效。最好还是新建一个global.less中修改组件默认样式,然后在main.js中引入一下。一般在要修改的组件上添加个类名比如user,这样只修改当前组件。当前文件<style>.ant-tabs-ink-bar {visibility: hidden;}</style>global.less// 添
·
1. 取消下划线
- 写在当前vue文件样式中不添加
scoped
属性才会生效。 - 最好还是新建一个
global.less
中修改组件默认样式,然后在main.js
中引入一下。一般在要修改的组件上添加个类名比如user
,这样只修改当前组件。
- 当前文件
<style>
.ant-tabs-ink-bar {
visibility: hidden;
}
</style>
global.less
a-tab
组件上直接添加class="user"
<a-tabs v-model:activeKey="activeKey" class="user">
<a-tab-pane key="1" tab="客户信息">Content of Tab Pane 1</a-tab-pane>
<a-tab-pane key="2" tab="Tab 2" force-render>Content of Tab Pane 2</a-tab-pane>
<a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane>
</a-tabs>
// 添加个类名 隐藏掉激活时候下划线
.user{
.ant-tabs-ink-bar {
visibility: hidden;
}
}
修改后:
其它:
给激活的tab
标签添加其它样式~感觉还不错
.user{
.ant-tabs-ink-bar {
visibility: hidden;
}
.ant-tabs-nav .ant-tabs-tab-active {
background-color: @primary-color;
color: #fff;
border-radius: 20px;
text-shadow: 0 0 10px currentColor
}
}
2. 修改激活时候下划线颜色
.user{
.ant-tabs-ink-bar{
background-color: red;
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)