更改el-tabs默认样式,实现tab标签居中显示,标签对应内容使用另一个div显示

这篇具有很好参考价值的文章主要介绍了更改el-tabs默认样式,实现tab标签居中显示,标签对应内容使用另一个div显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先看效果图
更改el-tabs默认样式,实现tab标签居中显示,标签对应内容使用另一个div显示,vue.js,javascript,前端
如图所示,标签在浏览器窗口居中,但是下面的内容依然是默认从左到右,不会受到tab样式的影响文章来源地址https://www.toymoban.com/news/detail-840968.html

<template>
  <div>
    <div style="display: flex; justify-content: center; align-items: center;">
      <el-tabs v-model="activeName" class="demo-tabs no-content" @tab-click="handleClick">
        <el-tab-pane label="文本" name="first">
          <!--        <TextCode />-->
        </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-tab-pane label="音视频" name="five"></el-tab-pane>
      </el-tabs>
    </div>
    <div style="background-color: #f6f8f7;">
      <TextCode v-if="activeName === 'second'"/>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import TextCode from "./code/textCode.vue";

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
</script>
<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  background-color: #f6f8f7;
}

.no-content .el-tabs__content {
  display: none;
}
</style>

到了这里,关于更改el-tabs默认样式,实现tab标签居中显示,标签对应内容使用另一个div显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui中el-tabs 标签页使用技巧

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 当我们使用el-tabs不要按照固化的思路去写每一页的具体内容,可以通过放在el-tabs外部,相同内容,来让代码更简洁 提示:以下是本篇文章代码,下面案例可供参考 提示:这里简单的介绍了一个el-tabs的使用

    2024年02月16日
    浏览(44)
  • 改变element-ui中el-tabs组件的样式

    2024年01月24日
    浏览(46)
  • Element-ui中el-tabs的下划线样式微调

    1.页面加载周期结束之后调用方法          2.写这个方法 3.el-tabs上绑定ref就可以了          4.结果:下划线就可以向左边偏移一点了,看起来更好看  

    2024年02月11日
    浏览(33)
  • 解决element ui中el-tabs标签点击切换闪屏问题

    现象:点击切换 element ui中el-tabs时候,table会出现闪一下的状况; 初始element ui中el-tabs组件代码如下: 使用v-if=\\\"activeName===\\\'first\\\'\\\" 解决闪屏   改造后代码如下:

    2024年02月07日
    浏览(45)
  • Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中

    目录 默认样式 修改默认字体颜色: 修改鼠标悬浮/选中字体颜色: 去掉长分割线并修改下划线颜色 完整代码 默认样式 注意事项:一定要在 style scoped不然修改的样式不会覆盖生效 修改默认字体颜色: 修改鼠标悬浮/选中字体颜色: 去掉长分割线并修改下划线颜色 完整代码

    2024年02月04日
    浏览(79)
  • 【element-ui 中 el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】

    element-ui 【el-tabs+el-menu 实现点击菜单 新增导航tab页 并实现关闭其他、当前、所有的功能】 文章分3个部分 el-tabs 以及右击菜单代码 vuex 代码及其方法实现 router路由信息常规写法el-menu写法常规(自行去掉修饰部分) el-tabs 以及右击菜单代码

    2024年02月11日
    浏览(54)
  • 【Element】实现基于 Element UI el-tabs 的左右滑动动画

    在构建现代 web 应用时,为用户提供平滑的动画效果是提升用户体验的关键。本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画。 首先,我们需要创建一个基础的 el-tabs 组件,用于展示不同的内容区域。 我们希望了解用户是向左

    2024年03月14日
    浏览(46)
  • elementUI如何给el-tabs/el-tab-pane添加图标

    原始的el-tabs 添加图标后的样式 ps:红色是因为添加了额外的css 在此不做描述 html部分的代码 给 el-tabs 添加 stretch 属性,使得tabs平铺满整个页面; 通过 v-if 控制选中时图标的颜色更改(其实就是换个图标); style部分的代码 由于用的是自定义的图标,所以需要在background中引

    2024年02月13日
    浏览(42)
  • element UI el-tabs组件使用

    使用 Elemenet UI 框架中的 el-tabs 组件 平时在做项目时,tab切换效果几乎是必不可少的,下来整理一个最近做的一个小功能:el-tabs    说明: v-model:当前选中项 :tab-position:tab栏显示方向 @tab-click:切换tab栏的事件 JS:

    2024年02月11日
    浏览(41)
  • 关于修改element-ui中Tabs标签页选中标签下划线缩短居中效果的实现方法

    需求描述: 下划线需要改为原来的一半,并且可以根据元素长度动态更换长度。 原样式: 改为以下样式: 思路如下 :element-ui通过一个独立的元素实现tab间切换能够达到下划线滑动的动态效果,所以将下划线独立为一个元素,并非使用tab自身的盒子设置下边框的样式去实现

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包