element-ui组件el-tabs控制内容滚动
element-ui默认tabs控件,如果内容多的话是整体滚动,tab标题页跟着内容一起滚动了
这种体验有点不够友好,YESWEB开发框架 增强了Element-UI的el-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开发框架网发布内容,转载请附上原文出处连接
yesweb 张国生