element-ui组件el-tabs控制内容滚动


element-ui默认tabs控件,如果内容多的话是整体滚动,tab标题页跟着内容一起滚动了

YESWEB开发框架
element-ui el-tabs内容滚动
VUE前端开发框架
.NET Core开发框架

这种体验有点不够友好,YESWEB开发框架 增强了Element-UIel-tabs的样式库

YESWEB开发框架中,如果想要只滚动内容,给el-tabs添加一个 gz-tags-scroller样式即可

样式预览(less代码):

CSS 全选
.gz-tabs-scroller {
  overflow: hidden;
  display: flex;
  .el-tabs__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0px;
    overflow: hidden;
    .el-tab-pane {
      flex: 1;
      overflow: auto;
    }
  }
  &.el-tabs--top {
    flex-direction: column;
    .el-tab-pane {
      padding: 8px;
    }
  }
  &.el-tabs--left {
    .el-tab-pane {
      padding: 8px 0px;
    }
  }
}

图片

效果预览:

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
关联文章

element-uiel-tabs控制内容滚动
vue3 element-plus实现长滚动,一个一个内容块 和tab联动
vue3重新封装element-plus库的按钮组件el-button
element-ui el-row中有多个el-col的时候,某些情况下el-col显示错位
element-ui改进el-form表单样式,取消form-item底部的边距:form-inner-error
VUE3监听div滚动滚动超出后折叠collapse
vue3 ts setup 封装element-plus el-dialog,并使用v-model
element-ui el-table不显示合计行的解决办法
Bootstrap 弹窗JS封装
element-ui本地引用库下载
winformOpenFileDialog控Filter属性设置
YES-CMS内容管理系统插扩展
Element-UI省市区选择组件city-picker
解决uniapp buttontype类型的类型
DevExpress 历史各版本下载地址【更新:V21.1.5】
YES-CMS 内容管理系统 TinyMCE编辑插演示
页面快排插开发
Devexpress GridControl删除控中多余无效的ColumnEdit
iNeuOS工业互联网操作系统,分布式云端控制安全策略和增加实时日志功能
搞工业互联网平台的企业为什么不搞工业控制层?