ElementUI修改el-tabs标签页组件样式

原创已于 2024-01-12 11:08:41 修改 · 1.9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript #vue.js #前端框架

于 2023-12-28 10:13:20 首次发布

文章介绍了ElementUI库中的el-tabs组件的用法，包括HTML结构和CSS样式调整，展示了如何创建一个带有边框卡片样式的标签切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网

https://element.eleme.cn/2.13/#/zh-CN/component/tabs

效果

代码片段

html

<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
        <el-tab-pane label="基本信息" name="jbxx">基本信息</el-tab-pane>
        <el-tab-pane label="标签要素" name="bqys">标签要素</el-tab-pane>
        <el-tab-pane label="理化特征" name="lhtz">理化特征</el-tab-pane>
        <el-tab-pane label="危害信息" name="whxx">危害信息</el-tab-pane>
        <el-tab-pane label="应急处理措施" name="yjclcs">应急处理措施</el-tab-pane>
</el-tabs>

css

// el-tabs样式美化
::v-deep .el-tabs--border-card{
  background: transparent;
  border: none;
  box-shadow: none;
  -webkit-box-shadow:none;
}
::v-deep .el-tabs--border-card > .el-tabs__header{
  background-color: transparent;
  border-bottom: none;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  margin-left: 8px;
  border: none;
  border-radius: 8px 8px 0 0;
  background-color: #F3F7FE;
  padding: 4px 20px;
  color:#0065D5;
  line-height: 22px;
  height: 30px;
}
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{
  background-color: #0065D5;
  color: #ffffff;
}