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

目录
  • ElementUI修改el-tabs标签页组件样式
    • 效果图
  • ElementUI的el-tabs标签页样式冲突问题
    • 修改样式即可

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

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

效果图

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        :stretch="false"
        style="color: white; height: 300px; width: 100%;caret-color: transparent;"
      >
        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
        <el-tab-pane label="定时任务补偿" name="fourth"
          >定时任务补偿</el-tab-pane
        >
      </el-tabs>

修改css：

  ::v-deep .el-tabs__content {
    overflow: visible;
  }
  ::v-deep .el-tabs__item {
    color: white;
  }
  ::v-deep .el-tabs__item.is-active {
    color: #15cbf3;
  }
  ::v-deep .el-icon-arrow-left {
    color: white;
  }
  ::v-deep .el-icon-arrow-right {
    color: white;
  }
  ::v-deep .el-tabs__nav-wrap::after {
    height: 0;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #15cbf3;
  }

ElementUI的el-tabs标签页样式冲突问题

我这里是用一个标签页套入了另一个标签页，但是所有的最后一个都与其它的对不齐

这是官网代码，不多说，看一下大致逻辑

 <el-tabs :tab-position="tabPosition" style="height: 200px;">
    <el-tab-pane label="用户管理">用户管理</el-tab-pane>
    <el-tab-pane label="配置管理">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理">角色管理</el-tab-pane>
    <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
  </el-tabs>

修改样式即可

根据自身需要，修改px的数值

.el-tabs--bottom .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card>.el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card>.el-tabs__header .el-tabs__item:last-child {
	padding-right: 10px
}

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue修改Element的el-table样式的4种方法

    修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style. 3. header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style. 4. header-c

  • element-UI el-table树形数据 修改小三角图标方式

    element-UI el-table树形数据 修改小三角图标方式

    目录 element-UI el-table树形数据 修改小三角图标 el-table树形数据 默认样式 更改成自定义样式 element-UI 修改默认的一些样式 element-UI el-table树形数据 修改小三角图标 el-table树形数据 默认样式 有下级没展开是▸ 有下级展开了是▾ 没有下级的前面什么符号也没有. 更改成自定义样式 因为是vue的 <style scoped>内写CSS 样式,所以需要添加 /deep/ 进行穿透 .el-tree /deep/ .el-tre

  • element中Steps步骤条和Tabs标签页关联的解决

    element中Steps步骤条和Tabs标签页关联的解决

    步骤条和标签页的简单关联 1.步骤条: 步骤条的acitve属性用来设置当前激活的步骤,类型为number <el-steps :active="active - 0" finish-status="success"> <el-step title="步骤 1"></el-step> <el-step title="步骤 2"></el-step> <el-st

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

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

    目录 ElementUI修改el-tabs标签页组件样式 效果图 ElementUI的el-tabs标签页样式冲突问题 修改样式即可 ElementUI修改el-tabs标签页组件样式 官方示例:https://element.eleme.cn/#/zh-CN/component/tabs 效果图 <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="false"

  • 如何在Vue.js中实现标签页组件详解

    如何在Vue.js中实现标签页组件详解

    前言 标签页组件,即实现选项卡切换,常用于平级内容的收纳与展示. 因为每个标签页的内容是由使用组件的父级控制的,即这部分内容为一个 slot.所以一般的设计方案是,在 slot 中定义多个 div,然后在接到切换消息时,再显示或隐藏相关的 div.这里面就把相关的交互逻辑也编写进来了,我们希望在组件中处理这些交互逻辑,slot 只单纯处理业务逻辑.这可以通过再定义一个 pane 组件来实现,pane 组件嵌在 tabs 组件中. 1 基础版 因为 tabs 组件中的标题是在 pane 组件中定义

  • Vue.js标签页组件使用方法详解

    Vue.js标签页组件使用方法详解

    本文实例为大家分享了Vue.js标签页组件使用的具体代码,供大家参考,具体内容如下 效果 入口页 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q

  • jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    jQuery EasyUI API 中文文档 - Tabs标签页/选项卡

    Tabs 标签页/选项卡 用$.fn.tabs.defaults重写defaults. 依赖 panel linkbutton 用法示例 创建tabs 1. 经由标记创建Tabs 从标记创建Tabs更容易,我们不需要写任何JavaScript代码.记住把 'easyui-tabs' 类添加到<div/>标记,每个tab panel 经由子<div/>标记被创建,其用法与Panel一样. 复制代码 代码如下: <div id="tt" class="

  • 基于Bootstrap的标签页组件及bootstrap-tab使用说明

    基于Bootstrap的标签页组件及bootstrap-tab使用说明

    bootstrap-tab bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能: tab页初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 :引入样式 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <

  • 原生JavaScript写出Tabs标签页的实例代码

    最近在重新学习JavaScript,手写了一个tabs标签页. 话不多说,直接开始. 首先,是前端页面. 图1 tabs 先来把tabs分解一下: 图2 tabs分解 首先,一个大的框div,上面红色的框是导航栏nav,导航栏里是一个无序列表ul,里面三个li标签(黄色的框),li标签里两个绿色标签是两个span,一个用来放导航的名字,一个用来放导航关闭的icon,右边是一个button,用来添加新的导航栏及内容:下方是导航栏的内容section. 导航tabs.html代码如下: <!DOCT

  • 纯css+js写的一个简单的tab标签页带样式

    纯css+js写的一个简单的tab标签页带样式

    最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图:  接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

  • jQuery EasyUI 布局之动态添加tabs标签页

    jQuery EasyUI 布局之动态添加tabs标签页

    在没看下文之前先给大家简单介绍easyui相关知识. easyui是一种基于jQuery的用户界面插件集合.ddd easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 通过使用 jQuery EasyUI 可以很容易地添加 Tabs.您只需要调用

  • Ant Design Blazor 组件库的路由复用多标签页功能

    Ant Design Blazor 组件库的路由复用多标签页功能

    最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 `Tabs` 组件的 `ReuseTabs` 组件. 最近,在 Ant Design Blazor 组件库中实现多标签页组件的呼声日益高涨.于是,我利用周末时间,结合 Blazor 内置路由组件实现了基于 Tabs 组件的 ReuseTabs 组件. 前言 Blazor 是 .NET 最新的前端框架,可以基于 WebAssembly 或 Sign

随机推荐