Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

• 移动开发

目录

默认样式

修改默认字体颜色：

修改鼠标悬浮/选中字体颜色：

去掉长分割线并修改下划线颜色

完整代码

默认样式

Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

注意事项：一定要在 不然修改的样式不会覆盖生效

修改默认字体颜色：

Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

::v-deep .el-tabs__item {
    color:green;
    opacity: 0.5;
}

修改鼠标悬浮/选中字体颜色：

Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

::v-deep .el-tabs__item.is-active {
  color: red;//选中
  opacity: 1;
}

::v-deep .el-tabs__item:hover {
  color: red;//悬浮
  cursor: pointer;
  opacity: 1;
}

去掉长分割线并修改下划线颜色

Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

/*去下划线 */
::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
  background-color: red;
}

完整代码

    
        User
        Config
        Role
        Task
    


import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElTabs, ElTabPane } from "element-plus";

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}


.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

::v-deep .el-tabs__item {
    color: green;
    opacity: 0.5;
}

/**选中 */
::v-deep .el-tabs__item.is-active {
    color: red;
    opacity: 1;
}

/**悬浮 */
::v-deep .el-tabs__item:hover {
    color: red;
    cursor: pointer;
    opacity: 1;
}


/*去下划线 */
::v-deep .el-tabs__nav-wrap::after {
    position: static !important;
}

/* 下划线颜色 */
::v-deep .el-tabs__active-bar {
    background-color: red;
}

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/4ab291a5c4.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐