当前位置:   article > 正文

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

el-tabs样式

目录

默认样式

修改默认字体颜色:

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

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

完整代码


默认样式

注意事项:一定要在 <style scoped>不然修改的样式不会覆盖生效

修改默认字体颜色:

  1. ::v-deep .el-tabs__item {
  2. color:green;
  3. opacity: 0.5;
  4. }

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

  1. ::v-deep .el-tabs__item.is-active {
  2. color: red;//选中
  3. opacity: 1;
  4. }
  5. ::v-deep .el-tabs__item:hover {
  6. color: red;//悬浮
  7. cursor: pointer;
  8. opacity: 1;
  9. }

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

  1. /*去下划线 */
  2. ::v-deep .el-tabs__nav-wrap::after {
  3. position: static !important;
  4. }
  5. /* 下划线颜色 */
  6. ::v-deep .el-tabs__active-bar {
  7. background-color: red;
  8. }

完整代码

  1. <template>
  2. <el-tabs v-model="activeName" @tab-click="handleClick">
  3. <el-tab-pane label="User" name="first">User</el-tab-pane>
  4. <el-tab-pane label="Config" name="second">Config</el-tab-pane>
  5. <el-tab-pane label="Role" name="third">Role</el-tab-pane>
  6. <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  7. </el-tabs>
  8. </template>
  9. <script lang="ts" setup>
  10. import { ref } from 'vue'
  11. import type { TabsPaneContext } from 'element-plus'
  12. import { ElTabs, ElTabPane } from "element-plus";
  13. const activeName = ref('first')
  14. const handleClick = (tab: TabsPaneContext, event: Event) => {
  15. console.log(tab, event)
  16. }
  17. </script>
  18. <style scoped>
  19. .demo-tabs>.el-tabs__content {
  20. padding: 32px;
  21. color: #6b778c;
  22. font-size: 32px;
  23. font-weight: 600;
  24. }
  25. ::v-deep .el-tabs__item {
  26. color: green;
  27. opacity: 0.5;
  28. }
  29. /**选中 */
  30. ::v-deep .el-tabs__item.is-active {
  31. color: red;
  32. opacity: 1;
  33. }
  34. /**悬浮 */
  35. ::v-deep .el-tabs__item:hover {
  36. color: red;
  37. cursor: pointer;
  38. opacity: 1;
  39. }
  40. /*去下划线 */
  41. ::v-deep .el-tabs__nav-wrap::after {
  42. position: static !important;
  43. }
  44. /* 下划线颜色 */
  45. ::v-deep .el-tabs__active-bar {
  46. background-color: red;
  47. }
  48. </style>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/403142
推荐阅读
相关标签
  

闽ICP备14008679号