ElementUI - 改变＜el-tabs＞选项卡（标签页）组件标题文字大小 / 去除底部灰色线条_el-tabs设置大小

作者：知新_RL | 2024-05-03 16:16:30

踩

el-tabs设置大小

解决方案有两种，请根据您的实际需求进行选择。

官网默认的例子文字比较小，希望将文字调大，

如下图所示：
在这里插入图片描述

官方文档：https://element.eleme.cn/#/zh-CN/component/tabs

使用 /deep/ 深度选择器，配合 !important ，轻松覆盖样式,

打开标签页组件所在页面，插入以下 css 代码即可：

/deep/.el-tabs__item {
	/* 修改为您想要的文字大小 */
    font-size: 20px!important;
}
1
2
3
4

官方虽然没直接提供修改文字大小的属性，

但间接提供了 slot 插槽标签页，同样可以实现，具体详见：

在这里插入图片描述

默认地下有线条，可以很容易去掉它。

在这里插入图片描述

/deep/.el-tabs__nav-wrap::after {
    /* 去掉下划线 */
    position: static !important;
}
1
2
3
4

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/530494

ElementUI - 改变 ＜el-tabs＞ 选项卡（标签页）组件标题文字大小 / 去除底部灰色线条_el-tabs设置大小