vxe-pc-ui 4.6.35 → 4.6.36

package/lib/vxe-tabs/style/style.min.css

@@ -1 +1 @@
-.vxe-tabs{display:flex;flex-direction:column;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.is--padding .vxe-tabs-pane--item{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header{display:flex;flex-direction:row}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;width:2em;border:1px solid var(--vxe-ui-input-border-color);cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;top:0;width:1px;height:100%;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color);background-color:var(--vxe-ui-font-tinge-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--left-bar{border-right:0;box-shadow:8px 0 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--left-bar::after{right:-1px}.vxe-tabs-header--right-bar{border-left:0;box-shadow:-8px 0 10px -5px var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--right-bar::after{left:-1px}.vxe-tabs-header--extra{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--wrapper{position:relative;flex-grow:1}.vxe-tabs-header--wrapper::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--item-wrapper{position:relative;display:flex;flex-direction:row;overflow-y:hidden;overflow-x:auto;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1}.vxe-tabs-header--item-icon{padding:0 .6em}.vxe-tabs-header--item-icon+.vxe-tabs-header--item-name{padding-left:0}.vxe-tabs-header--item-name{padding:0 .6em}.vxe-tabs-header--close-btn,.vxe-tabs-header--refresh-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;margin:0 .2em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover,.vxe-tabs-header--refresh-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active,.vxe-tabs-header--refresh-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i,.vxe-tabs-header--refresh-btn>i{font-size:1em}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane{flex-grow:1;overflow:hidden}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;bottom:0;left:0;height:2px;width:4px;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;width:4px;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1);transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);pointer-events:none;z-index:1}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs--card .vxe-tabs-header--bar{border-top:0}.vxe-tabs--card .vxe-tabs-header--left-bar{border-left:0}.vxe-tabs--card .vxe-tabs-header--right-bar{border-right:0}.vxe-tabs--card .vxe-tabs-header{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--card .vxe-tabs-header .vxe-tabs-header--wrapper{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs--card .vxe-tabs-header--item{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--card .vxe-tabs-header--item:first-child{border-left:0}.vxe-tabs--card .vxe-tabs-header--item:last-child{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs--border-card .vxe-tabs-header--bar{border-top:0}.vxe-tabs--border-card .vxe-tabs-header--left-bar{border-left:0}.vxe-tabs--border-card .vxe-tabs-header--right-bar{border-right:0}.vxe-tabs--border-card.is--height .vxe-tabs-pane--item,.vxe-tabs--border-card.is--padding .vxe-tabs-pane--item{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-pane--item.has--content{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--border-card .vxe-tabs-header{border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-tabs-card-header-background-color)}.vxe-tabs--border-card .vxe-tabs-header .vxe-tabs-header--wrapper{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs--border-card .vxe-tabs-header--item.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--round-card .vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs--round-card .vxe-tabs-header--item{position:relative;z-index:2;margin:0 2px;border-top:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color);border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs--round-card .vxe-tabs-header--item.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--round-card .vxe-tabs-header--item:first-child{margin-left:0}.vxe-tabs--round-card .vxe-tabs-header--item:last-child{margin-right:0}.vxe-tabs--round-card.is--height .vxe-tabs-pane--item,.vxe-tabs--round-card.is--padding .vxe-tabs-pane--item{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--round-card .vxe-tabs-pane--item.has--content{border-bottom:1px solid var(--vxe-ui-input-border-color);border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs--round-card .vxe-tabs-pane{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs .vxe-tabs-header--wrapper{height:var(--vxe-ui-tabs-header-height-default);overflow:hidden}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}
+.vxe-tabs{display:flex;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-tabs.pos--bottom,.vxe-tabs.pos--top{flex-direction:column}.vxe-tabs.pos--left,.vxe-tabs.pos--right{flex-direction:row}.vxe-tabs.trigger--default .vxe-tabs-header--item{cursor:pointer}.vxe-tabs.trigger--default .vxe-tabs-header--item:hover .vxe-tabs-header--item-name{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--bar{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer}.vxe-tabs-header--bar::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:3}.vxe-tabs-header--bar:focus{color:var(--vxe-ui-font-darken-color)}.vxe-tabs-header--bar:hover{color:var(--vxe-ui-font-primary-lighten-color)}.vxe-tabs-header--bar:active{color:var(--vxe-ui-font-primary-darken-color)}.vxe-tabs-header--bar.type--border-card,.vxe-tabs-header--bar.type--card,.vxe-tabs-header--bar.type--default,.vxe-tabs-header--bar.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--bar.type--round-card{background-color:rgba(0,0,0,.02)}.vxe-tabs-header--bar.pos--bottom,.vxe-tabs-header--bar.pos--top{width:1.6em}.vxe-tabs-header--bar.pos--bottom::after,.vxe-tabs-header--bar.pos--top::after{top:0;width:1px;height:100%}.vxe-tabs-header--bar.pos--left,.vxe-tabs-header--bar.pos--right{width:100%;height:1.6em}.vxe-tabs-header--bar.pos--left::after,.vxe-tabs-header--bar.pos--right::after{left:0;width:100%;height:1px}.vxe-tabs-header--prev-bar.type--default.pos--bottom,.vxe-tabs-header--prev-bar.type--default.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--default.pos--left,.vxe-tabs-header--prev-bar.type--default.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--top{border-bottom:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--bottom{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--top{border-top:0;border-right:0}.vxe-tabs-header--prev-bar.type--border-card.pos--bottom{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--left{border-left:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--border-card.pos--right{border-right:0;border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--top{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--bottom{border-right:0}.vxe-tabs-header--prev-bar.type--round-card.pos--left{border-bottom:0}.vxe-tabs-header--prev-bar.type--round-card.pos--right{border-bottom:0}.vxe-tabs-header--prev-bar.pos--bottom::after,.vxe-tabs-header--prev-bar.pos--top::after{right:0}.vxe-tabs-header--prev-bar.pos--left::after,.vxe-tabs-header--prev-bar.pos--right::after{bottom:0}.vxe-tabs-header--prev-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--prev-bar.scrolling--middle.pos--top{box-shadow:4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prev-bar.scrolling--middle.pos--left,.vxe-tabs-header--prev-bar.scrolling--middle.pos--right{box-shadow:0 4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.type--default.pos--bottom,.vxe-tabs-header--next-bar.type--default.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--default.pos--left,.vxe-tabs-header--next-bar.type--default.pos--right{border-top:0}.vxe-tabs-header--next-bar.type--card.pos--top{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--bottom{border-bottom:0;border-left:0}.vxe-tabs-header--next-bar.type--card.pos--left{border-top:0;border-right:0}.vxe-tabs-header--next-bar.type--card.pos--right{border-top:0;border-left:0}.vxe-tabs-header--next-bar.type--border-card.pos--top{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--border-card.pos--left{border-left:0;border-top:0}.vxe-tabs-header--next-bar.type--border-card.pos--right{border-right:0;border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--top{border-left:0}.vxe-tabs-header--next-bar.type--round-card.pos--bottom{border-left:0;border-bottom:0}.vxe-tabs-header--next-bar.type--round-card.pos--left{border-top:0}.vxe-tabs-header--next-bar.type--round-card.pos--right{border-top:0}.vxe-tabs-header--next-bar.pos--bottom::after,.vxe-tabs-header--next-bar.pos--top::after{left:0}.vxe-tabs-header--next-bar.pos--left::after,.vxe-tabs-header--next-bar.pos--right::after{top:0}.vxe-tabs-header--next-bar.scrolling--middle.pos--bottom,.vxe-tabs-header--next-bar.scrolling--middle.pos--top{box-shadow:-4px 0 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--next-bar.scrolling--middle.pos--left,.vxe-tabs-header--next-bar.scrolling--middle.pos--right{box-shadow:0 -4px 6px 0 var(--vxe-ui-tabs-bar-scrolling-box-shadow-color)}.vxe-tabs-header--prefix,.vxe-tabs-header--suffix{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-shrink:0}.vxe-tabs-header--prefix.type--border-card.pos--top,.vxe-tabs-header--prefix.type--default.pos--top,.vxe-tabs-header--prefix.type--round-card.pos--top,.vxe-tabs-header--suffix.type--border-card.pos--top,.vxe-tabs-header--suffix.type--default.pos--top,.vxe-tabs-header--suffix.type--round-card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--bottom,.vxe-tabs-header--prefix.type--default.pos--bottom,.vxe-tabs-header--prefix.type--round-card.pos--bottom,.vxe-tabs-header--suffix.type--border-card.pos--bottom,.vxe-tabs-header--suffix.type--default.pos--bottom,.vxe-tabs-header--suffix.type--round-card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--left,.vxe-tabs-header--prefix.type--default.pos--left,.vxe-tabs-header--prefix.type--round-card.pos--left,.vxe-tabs-header--suffix.type--border-card.pos--left,.vxe-tabs-header--suffix.type--default.pos--left,.vxe-tabs-header--suffix.type--round-card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--prefix.type--border-card.pos--right,.vxe-tabs-header--prefix.type--default.pos--right,.vxe-tabs-header--prefix.type--round-card.pos--right,.vxe-tabs-header--suffix.type--border-card.pos--right,.vxe-tabs-header--suffix.type--default.pos--right,.vxe-tabs-header--suffix.type--round-card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item-wrapper{position:relative;display:flex;outline:0}.vxe-tabs-header--item{position:relative;flex-shrink:0;padding:0 .5em}.vxe-tabs-header--item.is--active .vxe-tabs-header--item-content{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--item.align--left{text-align:left}.vxe-tabs-header--item.align--center{text-align:center}.vxe-tabs-header--item.align--right{text-align:right}.vxe-tabs-header--item.type--card.pos--top{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom,.vxe-tabs-header--item.type--card.pos--top{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--bottom:first-child,.vxe-tabs-header--item.type--card.pos--top:first-child{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--right{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left,.vxe-tabs-header--item.type--card.pos--right{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--card.pos--left:first-child,.vxe-tabs-header--item.type--card.pos--right:first-child{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--item.type--border-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card{z-index:2;border:1px solid var(--vxe-ui-input-border-color);background-color:rgba(0,0,0,.02);transition:color .3s ease-in-out}.vxe-tabs-header--item.type--round-card.is--active{background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs-header--item.type--round-card.pos--top{border-bottom:0;border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--item.type--round-card.pos--bottom{border-top:0;border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--bottom,.vxe-tabs-header--item.type--round-card.pos--top{margin:0 2px}.vxe-tabs-header--item.type--round-card.pos--bottom:first-child,.vxe-tabs-header--item.type--round-card.pos--top:first-child{margin-left:0}.vxe-tabs-header--item.type--round-card.pos--bottom:last-child,.vxe-tabs-header--item.type--round-card.pos--top:last-child{margin-right:0}.vxe-tabs-header--item.type--round-card.pos--left{border-right:0;border-radius:var(--vxe-ui-base-border-radius) 0 0 var(--vxe-ui-base-border-radius)}.vxe-tabs-header--item.type--round-card.pos--right{border-left:0;border-radius:0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0}.vxe-tabs-header--item.type--round-card.pos--left,.vxe-tabs-header--item.type--round-card.pos--right{margin:2px 0}.vxe-tabs-header--item.type--round-card.pos--left:first-child,.vxe-tabs-header--item.type--round-card.pos--right:first-child{margin-top:0}.vxe-tabs-header--item.type--round-card.pos--left:last-child,.vxe-tabs-header--item.type--round-card.pos--right:last-child{margin-bottom:0}.vxe-tabs-header--item-inner{display:flex;flex-direction:row;align-items:center}.vxe-tabs-header--item-content{flex-grow:1;max-width:30em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vxe-tabs-header--item-icon{padding:0 .6em}.vxe-tabs-header--item-icon+.vxe-tabs-header--item-name{padding-left:0}.vxe-tabs-header--item-name{padding:0 .6em}.vxe-tabs-header--close-btn,.vxe-tabs-header--refresh-btn{font-size:.8em;border-radius:50%;width:1.5em;height:1.5em;margin:0 .2em;line-height:1.5em;text-align:center}.vxe-tabs-header--close-btn:hover,.vxe-tabs-header--refresh-btn:hover{color:var(--vxe-ui-font-color);background:var(--vxe-ui-tabs-close-hover-background-color)}.vxe-tabs-header--close-btn:active,.vxe-tabs-header--refresh-btn:active{color:var(--vxe-ui-font-primary-color)}.vxe-tabs-header--close-btn>i,.vxe-tabs-header--refresh-btn>i{font-size:1em}.vxe-tabs-header--refresh-btn{visibility:hidden}.vxe-tabs-header--refresh-btn.is--active{visibility:visible}.vxe-tabs-header--item-inner{transition:color .1s ease-in-out}.vxe-tabs-pane--wrapper{display:flex;flex-direction:column;flex-grow:1;overflow:hidden}.vxe-tabs-pane--body{flex-grow:1;overflow:hidden}.vxe-tabs-pane--body.is--padding{padding:var(--vxe-ui-layout-padding-default)}.vxe-tabs-pane--body.type--border-card,.vxe-tabs-pane--body.type--round-card{border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-pane--body.type--border-card.pos--top,.vxe-tabs-pane--body.type--round-card.pos--top{border-top:0}.vxe-tabs-pane--body.type--border-card.pos--bottom,.vxe-tabs-pane--body.type--round-card.pos--bottom{border-bottom:0}.vxe-tabs-pane--body.type--border-card.pos--left,.vxe-tabs-pane--body.type--round-card.pos--left{border-left:0}.vxe-tabs-pane--body.type--border-card.pos--right,.vxe-tabs-pane--body.type--round-card.pos--right{border-right:0}.vxe-tabs-pane--footer,.vxe-tabs-pane--top{flex-shrink:0;overflow:auto}.vxe-tabs-pane--item{display:none;height:100%;overflow:auto;outline:0}.vxe-tabs-pane--item.is--visible{display:block}.vxe-tabs-header{display:flex}.vxe-tabs-header.pos--bottom,.vxe-tabs-header.pos--top{flex-direction:row}.vxe-tabs-header.pos--left,.vxe-tabs-header.pos--right{flex-direction:column}.vxe-tabs-header.type--card.pos--top{border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--bottom{border-top:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--left{border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--card.pos--right{border-left:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card{background-color:var(--vxe-ui-tabs-card-header-background-color);border:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header.type--border-card.pos--top{border-bottom:0}.vxe-tabs-header.type--border-card.pos--bottom{border-top:0}.vxe-tabs-header.type--border-card.pos--left{border-right:0}.vxe-tabs-header.type--border-card.pos--right{border-left:0}.vxe-tabs-header--wrapper{position:relative;flex-grow:1;overflow:hidden}.vxe-tabs-header--wrapper.type--border-card,.vxe-tabs-header--wrapper.type--default,.vxe-tabs-header--wrapper.type--round-card{position:relative}.vxe-tabs-header--wrapper.type--border-card::after,.vxe-tabs-header--wrapper.type--default::after,.vxe-tabs-header--wrapper.type--round-card::after{content:"";position:absolute;background-color:var(--vxe-ui-input-border-color);z-index:0}.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{bottom:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after{top:0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--border-card.pos--top::after,.vxe-tabs-header--wrapper.type--default.pos--bottom::after,.vxe-tabs-header--wrapper.type--default.pos--top::after,.vxe-tabs-header--wrapper.type--round-card.pos--bottom::after,.vxe-tabs-header--wrapper.type--round-card.pos--top::after{left:0;width:100%;height:1px}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after{right:0}.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{left:0}.vxe-tabs-header--wrapper.type--border-card.pos--left::after,.vxe-tabs-header--wrapper.type--border-card.pos--right::after,.vxe-tabs-header--wrapper.type--default.pos--left::after,.vxe-tabs-header--wrapper.type--default.pos--right::after,.vxe-tabs-header--wrapper.type--round-card.pos--left::after,.vxe-tabs-header--wrapper.type--round-card.pos--right::after{top:0;width:1px;height:100%}.vxe-tabs-header--wrapper.type--border-card.pos--top{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0}.vxe-tabs-header--wrapper.type--border-card.pos--bottom{border-radius:0 0 var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius)}.vxe-tabs-header--wrapper.type--border-card>.vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.type--round-card>.vxe-tabs-header--item-wrapper{z-index:2}.vxe-tabs-header--wrapper.pos--bottom,.vxe-tabs-header--wrapper.pos--top{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs-header--wrapper.pos--bottom .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--top .vxe-tabs-header--item-wrapper{flex-direction:row;width:100%;overflow-y:hidden;overflow-x:auto}.vxe-tabs-header--wrapper.pos--left .vxe-tabs-header--item-wrapper,.vxe-tabs-header--wrapper.pos--right .vxe-tabs-header--item-wrapper{flex-direction:column;height:100%;overflow-y:auto;overflow-x:hidden}.vxe-tabs-header--active-line{display:none}.vxe-tabs-header--active-line.type--default{display:block;position:absolute;background-color:var(--vxe-ui-font-primary-color);z-index:2;transition:all .3s ease-in-out}.vxe-tabs-header--active-line.type--default.pos--top{bottom:0}.vxe-tabs-header--active-line.type--default.pos--bottom{top:0}.vxe-tabs-header--active-line.type--default.pos--bottom,.vxe-tabs-header--active-line.type--default.pos--top{left:0;height:2px;width:4px}.vxe-tabs-header--active-line.type--default.pos--left{right:0}.vxe-tabs-header--active-line.type--default.pos--right{left:0}.vxe-tabs-header--active-line.type--default.pos--left,.vxe-tabs-header--active-line.type--default.pos--right{top:0;height:4px;width:2px}.vxe-tabs-header--active-line.type--card{display:block;position:absolute;top:0;left:0;border:1px solid var(--vxe-ui-font-primary-color);pointer-events:none;z-index:1;box-shadow:0 0 8px rgba(0,0,0,.1)}.vxe-tabs-header--active-line.type--card.pos--bottom,.vxe-tabs-header--active-line.type--card.pos--top{width:4px;transition:color,left .3s ease-in-out}.vxe-tabs-header--active-line.type--card.pos--left,.vxe-tabs-header--active-line.type--card.pos--right{width:100%;transition:color,top .3s ease-in-out}.vxe-tabs-header--active-line.type--border-card{display:block;position:absolute;top:0;left:0;pointer-events:none;z-index:1}.vxe-tabs-header--active-line.type--border-card.pos--bottom,.vxe-tabs-header--active-line.type--border-card.pos--top{width:4px;border-left:1px solid var(--vxe-ui-input-border-color);border-right:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs-header--active-line.type--border-card.pos--left,.vxe-tabs-header--active-line.type--border-card.pos--right{width:100%;border-top:1px solid var(--vxe-ui-input-border-color);border-bottom:1px solid var(--vxe-ui-input-border-color)}.vxe-tabs .vxe-tabs-header--item-inner{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--card{height:var(--vxe-ui-tabs-header-height-default)}.vxe-tabs .vxe-tabs-header--active-line.type--border-card{height:calc(var(--vxe-ui-tabs-header-height-default) + 1px);line-height:calc(var(--vxe-ui-tabs-header-height-default) + 1px)}.vxe-tabs--border-card,.vxe-tabs--card,.vxe-tabs--default,.vxe-tabs--round-card{border-radius:var(--vxe-ui-base-border-radius) var(--vxe-ui-base-border-radius) 0 0;background-color:var(--vxe-ui-layout-background-color)}.vxe-tabs--default .vxe-tabs-header--item-inner{border-bottom:2px solid transparent}.vxe-tabs--card .vxe-tabs-header--item-inner,.vxe-tabs--round-card .vxe-tabs-header--item-inner{height:calc(var(--vxe-ui-tabs-header-height-default) - 1px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.6.35",
+  "version": "4.6.36",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

package/packages/tabs/src/tabs.ts

@@ -2,23 +2,31 @@ import { ref, h, reactive, inject, PropType, provide, computed, onUnmounted, wat
 import { defineVxeComponent } from '../../ui/src/comp'
 import { createEvent, getConfig, getIcon, globalEvents, permission, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
-import { toCssUnit } from '../../ui/src/dom'
+import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { warnLog, errLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
 
-import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods } from '../../../types'
+import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, TabsPrivateRef, VxeTabsPrivateComputed, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, TabsMethods, TabsPrivateMethods, VxeComponentStyleType } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxeTabs',
   props: {
     modelValue: [String, Number, Boolean] as PropType<VxeTabsPropTypes.ModelValue>,
     options: Array as PropType<VxeTabsPropTypes.Options>,
+    width: [String, Number] as PropType<VxeTabsPropTypes.Width>,
     height: [String, Number] as PropType<VxeTabsPropTypes.Height>,
     destroyOnClose: Boolean as PropType<VxeTabsPropTypes.DestroyOnClose>,
     titleWidth: [String, Number] as PropType<VxeTabsPropTypes.TitleWidth>,
     titleAlign: [String, Number] as PropType<VxeTabsPropTypes.TitleAlign>,
-    type: String as PropType<VxeTabsPropTypes.Type>,
+    type: {
+      type: String as PropType<VxeTabsPropTypes.Type>,
+      default: () => getConfig().tabs.type
+    },
+    position: {
+      type: String as PropType<VxeTabsPropTypes.Position>,
+      default: () => getConfig().tabs.position
+    },
     showClose: Boolean as PropType<VxeTabsPropTypes.ShowClose>,
     padding: {
       type: Boolean as PropType<VxeTabsPropTypes.Padding>,
@@ -50,13 +58,18 @@ export default defineVxeComponent({
 
     const refElem = ref<HTMLDivElement>()
     const refHeadWrapperElem = ref<HTMLDivElement>()
+    const refHeadPrevElem = ref<HTMLDivElement>()
+    const refHeadNextElem = ref<HTMLDivElement>()
 
     const reactData = reactive<TabsReactData>({
       staticTabs: [],
       activeName: null,
       initNames: [],
       lintLeft: 0,
+      lintTop: 0,
       lintWidth: 0,
+      lintHeight: 0,
+      scrollbarWidth: 0,
       isTabOver: false,
       resizeFlag: 1,
       cacheTabMaps: {}
@@ -70,6 +83,47 @@ export default defineVxeComponent({
       refElem
     }
 
+    const computeTabType = computed(() => {
+      const { type } = props
+      return type || 'default'
+    })
+
+    const computeTabPosition = computed(() => {
+      const { position } = props
+      return position || 'top'
+    })
+
+    const computeLrPosition = computed(() => {
+      const tabPosition = computeTabPosition.value
+      return tabPosition === 'left' || tabPosition === 'right'
+    })
+
+    const computeLineStyle = computed(() => {
+      const { lintLeft, lintTop, lintWidth, lintHeight } = reactData
+      const lrPosition = computeLrPosition.value
+      return lrPosition
+        ? {
+            top: `${lintTop}px`,
+            height: `${lintHeight}px`
+          }
+        : {
+            left: `${lintLeft}px`,
+            width: `${lintWidth}px`
+          }
+    })
+
+    const computeWrapperStyle = computed(() => {
+      const { width, height } = props
+      const stys: VxeComponentStyleType = {}
+      if (width) {
+        stys.width = toCssUnit(width)
+      }
+      if (width) {
+        stys.height = toCssUnit(height)
+      }
+      return stys
+    })
+
     const computeCloseOpts = computed(() => {
       return Object.assign({}, getConfig().tabs.closeConfig, props.closeConfig)
     })
@@ -123,41 +177,100 @@ export default defineVxeComponent({
       return []
     }
 
+    const checkScrolling = () => {
+      const lrPosition = computeLrPosition.value
+      const headerWrapperEl = refHeadWrapperElem.value
+      const headPrevEl = refHeadPrevElem.value
+      const headNextEl = refHeadNextElem.value
+      if (headerWrapperEl) {
+        const { scrollLeft, scrollTop, clientWidth, clientHeight, scrollWidth, scrollHeight } = headerWrapperEl
+        if (headPrevEl) {
+          if ((lrPosition ? scrollTop : scrollLeft) > 0) {
+            addClass(headPrevEl, 'scrolling--middle')
+          } else {
+            removeClass(headPrevEl, 'scrolling--middle')
+          }
+        }
+        if (headNextEl) {
+          if (lrPosition ? (clientHeight < scrollHeight - Math.ceil(scrollTop)) : (clientWidth < scrollWidth - Math.ceil(scrollLeft))) {
+            addClass(headNextEl, 'scrolling--middle')
+          } else {
+            removeClass(headNextEl, 'scrolling--middle')
+          }
+        }
+      }
+    }
+
     const updateTabStyle = () => {
-      nextTick(() => {
-        const { type } = props
+      const handleStyle = () => {
         const { activeName } = reactData
+        const tabType = computeTabType.value
         const tabOptions = computeTabOptions.value
         const tabStaticOptions = computeTabStaticOptions.value
         const headerWrapperEl = refHeadWrapperElem.value
+        const lrPosition = computeLrPosition.value
         let lintWidth = 0
+        let lintHeight = 0
         let lintLeft = 0
+        let lintTop = 0
+        let scrollbarWidth = 0
         let isOver = false
         if (headerWrapperEl) {
           const index = XEUtils.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, item => item.name === activeName)
-          const { children, scrollWidth, clientWidth } = headerWrapperEl
-          isOver = scrollWidth !== clientWidth
-          if (index > -1) {
-            const tabEl = children[index] as HTMLDivElement
-            const tabWidth = tabEl.clientWidth
-            if (type) {
-              if (type === 'card') {
-                lintWidth = tabWidth + 2
-                lintLeft = tabEl.offsetLeft
-              } else if (type === 'border-card') {
-                lintWidth = tabWidth + 2
-                lintLeft = tabEl.offsetLeft - 1
+          const { children, offsetWidth, scrollWidth, scrollHeight, clientWidth, clientHeight } = headerWrapperEl
+          scrollbarWidth = offsetWidth - clientWidth
+          if (lrPosition) {
+            isOver = scrollHeight !== clientHeight
+            if (index > -1) {
+              const tabEl = children[index] as HTMLDivElement
+              if (tabEl) {
+                const tabHeight = tabEl.clientHeight
+                const tabWidth = tabEl.clientWidth
+                if (tabType === 'card') {
+                  lintWidth = tabWidth
+                  lintHeight = tabHeight
+                  lintTop = tabEl.offsetTop
+                } else if (tabType === 'border-card') {
+                  lintWidth = tabWidth
+                  lintHeight = tabHeight
+                  lintTop = tabEl.offsetTop - 1
+                } else {
+                  lintHeight = Math.max(4, Math.floor(tabHeight * 0.6))
+                  lintTop = tabEl.offsetTop + Math.floor((tabHeight - lintHeight) / 2)
+                }
+              }
+            }
+          } else {
+            isOver = scrollWidth !== clientWidth
+            if (index > -1) {
+              const tabEl = children[index] as HTMLDivElement
+              if (tabEl) {
+                const tabWidth = tabEl.clientWidth
+                if (tabType === 'card') {
+                  lintWidth = tabWidth
+                  lintLeft = tabEl.offsetLeft
+                } else if (tabType === 'border-card') {
+                  lintWidth = tabWidth
+                  lintLeft = tabEl.offsetLeft - 1
+                } else {
+                  lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
+                  lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
+                }
               }
-            } else {
-              lintWidth = Math.max(4, Math.floor(tabWidth * 0.6))
-              lintLeft = tabEl.offsetLeft + Math.floor((tabWidth - lintWidth) / 2)
             }
           }
         }
+        reactData.scrollbarWidth = scrollbarWidth
         reactData.lintLeft = lintLeft
+        reactData.lintTop = lintTop
         reactData.lintWidth = lintWidth
+        reactData.lintHeight = lintHeight
         reactData.isTabOver = isOver
-      })
+        checkScrolling()
+      }
+
+      handleStyle()
+      nextTick(handleStyle)
     }
 
     const dispatchEvent = (type: ValueOf<VxeTabsEmits>, params: Record<string, any>, evnt: Event | null) => {
@@ -283,7 +396,9 @@ export default defineVxeComponent({
 
     const startScrollAnimation = (offsetPos: number, offsetSize: number) => {
       const { slTimeout } = internalData
-      let offsetLeft = offsetSize
+      const lrPosition = computeLrPosition.value
+      let offsetLeft = lrPosition ? 0 : offsetSize
+      let offsetTop = lrPosition ? offsetSize : 0
       let scrollCount = 6
       let delayNum = 35
       if (slTimeout) {
@@ -295,19 +410,36 @@ export default defineVxeComponent({
         if (scrollCount > 0) {
           scrollCount--
           if (headerWrapperEl) {
-            const { clientWidth, scrollWidth, scrollLeft } = headerWrapperEl
-            offsetLeft = Math.floor(offsetLeft / 2)
-            if (offsetPos > 0) {
-              if (clientWidth + scrollLeft < scrollWidth) {
-                headerWrapperEl.scrollLeft += offsetLeft
-                delayNum -= 4
-                internalData.slTimeout = setTimeout(scrollAnimate, delayNum)
+            const { clientWidth, clientHeight, scrollWidth, scrollHeight, scrollLeft, scrollTop } = headerWrapperEl
+            if (lrPosition) {
+              offsetTop = Math.floor(offsetTop / 2)
+              if (offsetPos > 0) {
+                if (clientHeight + scrollTop < scrollHeight) {
+                  headerWrapperEl.scrollTop += offsetTop
+                  delayNum -= 4
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum)
+                }
+              } else {
+                if (scrollTop > 0) {
+                  headerWrapperEl.scrollTop -= offsetTop
+                  delayNum -= 4
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum)
+                }
               }
             } else {
-              if (scrollLeft > 0) {
-                headerWrapperEl.scrollLeft -= offsetLeft
-                delayNum -= 4
-                internalData.slTimeout = setTimeout(scrollAnimate, delayNum)
+              offsetLeft = Math.floor(offsetLeft / 2)
+              if (offsetPos > 0) {
+                if (clientWidth + scrollLeft < scrollWidth) {
+                  headerWrapperEl.scrollLeft += offsetLeft
+                  delayNum -= 4
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum)
+                }
+              } else {
+                if (scrollLeft > 0) {
+                  headerWrapperEl.scrollLeft -= offsetLeft
+                  delayNum -= 4
+                  internalData.slTimeout = setTimeout(scrollAnimate, delayNum)
+                }
               }
             }
             updateTabStyle()
@@ -318,9 +450,11 @@ export default defineVxeComponent({
     }
 
     const handleScrollToLeft = (offsetPos: number) => {
+      const lrPosition = computeLrPosition.value
       const headerWrapperEl = refHeadWrapperElem.value
       if (headerWrapperEl) {
-        const offsetSize = Math.floor(headerWrapperEl.clientWidth * 0.75)
+        const { clientWidth, clientHeight } = headerWrapperEl
+        const offsetSize = Math.floor((lrPosition ? clientHeight : clientWidth) * 0.75)
         startScrollAnimation(offsetPos, offsetSize)
       }
     }
@@ -336,24 +470,39 @@ export default defineVxeComponent({
     const scrollToTab = (name: VxeTabsPropTypes.ModelValue) => {
       const tabOptions = computeTabOptions.value
       const tabStaticOptions = computeTabStaticOptions.value
+      const lrPosition = computeLrPosition.value
       return nextTick().then(() => {
         const headerWrapperEl = refHeadWrapperElem.value
         if (headerWrapperEl) {
           const index = XEUtils.findIndexOf(tabStaticOptions.length ? tabStaticOptions : tabOptions, item => item.name === name)
           if (index > -1) {
-            const { scrollLeft, clientWidth, children } = headerWrapperEl
+            const { scrollLeft, scrollTop, clientWidth, clientHeight, children } = headerWrapperEl
             const tabEl = children[index] as HTMLDivElement
             if (tabEl) {
-              const tabOffsetLeft = tabEl.offsetLeft
-              const tabClientWidth = tabEl.clientWidth
-              // 如果右侧被挡
-              const overSize = (tabOffsetLeft + tabClientWidth) - (scrollLeft + clientWidth)
-              if (overSize > 0) {
-                headerWrapperEl.scrollLeft += overSize
-              }
-              // 如果左侧被挡，优先
-              if (tabOffsetLeft < scrollLeft) {
-                headerWrapperEl.scrollLeft = tabOffsetLeft
+              if (lrPosition) {
+                const tabOffsetTop = tabEl.offsetTop
+                const tabClientHeight = tabEl.clientHeight
+                // 如果顶部被挡
+                const overSize = (tabOffsetTop + tabClientHeight) - (scrollTop + clientHeight)
+                if (overSize > 0) {
+                  headerWrapperEl.scrollTop += overSize
+                }
+                // 如果底部被挡，优先
+                if (tabOffsetTop < scrollTop) {
+                  headerWrapperEl.scrollTop = tabOffsetTop
+                }
+              } else {
+                const tabOffsetLeft = tabEl.offsetLeft
+                const tabClientWidth = tabEl.clientWidth
+                // 如果右侧被挡
+                const overSize = (tabOffsetLeft + tabClientWidth) - (scrollLeft + clientWidth)
+                if (overSize > 0) {
+                  headerWrapperEl.scrollLeft += overSize
+                }
+                // 如果左侧被挡，优先
+                if (tabOffsetLeft < scrollLeft) {
+                  headerWrapperEl.scrollLeft = tabOffsetLeft
+                }
               }
             }
           }
@@ -415,33 +564,51 @@ export default defineVxeComponent({
     Object.assign($xeTabs, tabsMethods, tabsPrivateMethods)
 
     const renderTabHeader = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
-      const { type, titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose, closeConfig, refreshConfig } = props
-      const { activeName, lintLeft, lintWidth, isTabOver, cacheTabMaps } = reactData
-      const extraSlot = slots.extra
+      const { titleWidth: allTitleWidth, titleAlign: allTitleAlign, showClose, closeConfig, refreshConfig } = props
+      const { activeName, scrollbarWidth, isTabOver, cacheTabMaps } = reactData
+      const tabType = computeTabType.value
+      const tabPosition = computeTabPosition.value
+      const lrPosition = computeLrPosition.value
+      const lineStyle = computeLineStyle.value
+      const prefixSlot = slots.prefix
+      const suffixSlot = slots.suffix || slots.extra
       const closeOpts = computeCloseOpts.value
       const closeVisibleMethod = closeOpts.visibleMethod
       const refreshOpts = computeRefreshOpts.value
       const refreshVisibleMethod = refreshOpts.visibleMethod
 
       return h('div', {
-        class: 'vxe-tabs-header'
+        key: 'th',
+        class: ['vxe-tabs-header', `type--${tabType}`, `pos--${tabPosition}`]
       }, [
+        prefixSlot
+          ? h('div', {
+            class: ['vxe-tabs-header--prefix', `type--${tabType}`, `pos--${tabPosition}`]
+          }, getSlotVNs(prefixSlot({ name: activeName })))
+          : renderEmptyElement($xeTabs),
         isTabOver
           ? h('div', {
-            class: 'vxe-tabs-header--bar vxe-tabs-header--left-bar',
+            ref: refHeadPrevElem,
+            class: ['vxe-tabs-header--bar vxe-tabs-header--prev-bar', `type--${tabType}`, `pos--${tabPosition}`],
             onClick: scrollLeftEvent
           }, [
             h('span', {
-              class: getIcon().TABS_TAB_BUTTON_LEFT
+              class: lrPosition ? getIcon().TABS_TAB_BUTTON_TOP : getIcon().TABS_TAB_BUTTON_LEFT
             })
           ])
           : renderEmptyElement($xeTabs),
         h('div', {
-          class: 'vxe-tabs-header--wrapper'
+          class: ['vxe-tabs-header--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
         }, [
           h('div', {
             ref: refHeadWrapperElem,
-            class: 'vxe-tabs-header--item-wrapper'
+            class: 'vxe-tabs-header--item-wrapper',
+            style: lrPosition && scrollbarWidth
+              ? {
+                  marginRight: `-${scrollbarWidth}px`
+                }
+              : undefined,
+            onScroll: checkScrolling
           }, tabList.map((item, index) => {
             const { title, titleWidth, titleAlign, icon, name, slots } = item
             const titleSlot = slots ? (slots.title || slots.tab) : null
@@ -453,14 +620,14 @@ export default defineVxeComponent({
             const isLoading = cacheItem ? cacheItem.loading : false
             return h('div', {
               key: `${name}`,
-              class: ['vxe-tabs-header--item', itemAlign ? `align--${itemAlign}` : '', {
+              class: ['vxe-tabs-header--item', `type--${tabType}`, `pos--${tabPosition}`, itemAlign ? `align--${itemAlign}` : '', {
                 'is--active': isActive
               }],
               style: itemWidth
                 ? {
                     width: toCssUnit(itemWidth)
                   }
-                : null,
+                : undefined,
               onClick (evnt: KeyboardEvent) {
                 clickEvent(evnt, item)
               }
@@ -484,9 +651,11 @@ export default defineVxeComponent({
                     class: 'vxe-tabs-header--item-name'
                   }, titleSlot ? callSlot(titleSlot, { name, title }) : `${title}`)
                 ]),
-                (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : isActive)
+                (isEnableConf(refreshConfig) || refreshOpts.enabled) && (refreshVisibleMethod ? refreshVisibleMethod(params) : true)
                   ? h('div', {
-                    class: 'vxe-tabs-header--refresh-btn',
+                    class: ['vxe-tabs-header--refresh-btn', {
+                      'is--active': isActive
+                    }],
                     onClick (evnt: KeyboardEvent) {
                       handleRefreshTabEvent(evnt, item)
                     }
@@ -498,7 +667,9 @@ export default defineVxeComponent({
                   : renderEmptyElement($xeTabs),
                 (showClose || (isEnableConf(closeConfig) || closeOpts.enabled)) && (!closeVisibleMethod || closeVisibleMethod(params))
                   ? h('div', {
-                    class: 'vxe-tabs-header--close-btn',
+                    class: ['vxe-tabs-header--close-btn', {
+                      'is--active': isActive
+                    }],
                     onClick (evnt: KeyboardEvent) {
                       handleCloseTabEvent(evnt, item, index, tabList)
                     }
@@ -513,28 +684,26 @@ export default defineVxeComponent({
           }).concat([
             h('span', {
               key: 'line',
-              class: `vxe-tabs-header--active-line type--${type || 'default'}`,
-              style: {
-                left: `${lintLeft}px`,
-                width: `${lintWidth}px`
-              }
+              class: ['vxe-tabs-header--active-line', `type--${tabType}`, `pos--${tabPosition}`],
+              style: lineStyle
             })
           ]))
         ]),
         isTabOver
           ? h('div', {
-            class: 'vxe-tabs-header--bar vxe-tabs-header--right-bar',
+            ref: refHeadNextElem,
+            class: ['vxe-tabs-header--bar vxe-tabs-header--next-bar', `type--${tabType}`, `pos--${tabPosition}`],
             onClick: scrollRightEvent
           }, [
             h('span', {
-              class: getIcon().TABS_TAB_BUTTON_RIGHT
+              class: lrPosition ? getIcon().TABS_TAB_BUTTON_BOTTOM : getIcon().TABS_TAB_BUTTON_RIGHT
             })
           ])
           : renderEmptyElement($xeTabs),
-        extraSlot
+        suffixSlot
           ? h('div', {
-            class: 'vxe-tabs-header--extra'
-          }, getSlotVNs(extraSlot({})))
+            class: ['vxe-tabs-header--suffix', `type--${tabType}`, `pos--${tabPosition}`]
+          }, getSlotVNs(suffixSlot({ name: activeName })))
           : renderEmptyElement($xeTabs)
       ])
     }
@@ -564,41 +733,81 @@ export default defineVxeComponent({
       return tabList.map((item) => renderTabPane(item))
     }
 
+    const rendetTabBody = (tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) => {
+      const { height, padding } = props
+      const { activeName } = reactData
+      const tabType = computeTabType.value
+      const tabPosition = computeTabPosition.value
+      const topSlot = slots.top
+      const footerSlot = slots.footer
+      const defParams = { name: activeName }
+      return h('div', {
+        key: 'tb',
+        class: ['vxe-tabs-pane--wrapper', `type--${tabType}`, `pos--${tabPosition}`]
+      }, [
+        topSlot
+          ? h('div', {
+            class: 'vxe-tabs-pane--top'
+          }, callSlot(topSlot, defParams))
+          : renderEmptyElement($xeTabs),
+        h('div', {
+          class: ['vxe-tabs-pane--body', `type--${tabType}`, `pos--${tabPosition}`, {
+            'is--padding': padding,
+            'is--height': height
+          }]
+        }, renderTabContent(tabList)),
+        footerSlot
+          ? h('div', {
+            class: 'vxe-tabs-pane--footer'
+          }, callSlot(footerSlot, defParams))
+          : renderEmptyElement($xeTabs)
+      ])
+    }
+
     const renderVN = () => {
-      const { type, height, padding, trigger } = props
+      const { height, padding, trigger } = props
+      const { activeName } = reactData
       const tabOptions = computeTabOptions.value
       const tabStaticOptions = computeTabStaticOptions.value
+      const tabType = computeTabType.value
+      const tabPosition = computeTabPosition.value
+      const wrapperStyle = computeWrapperStyle.value
       const defaultSlot = slots.default
-      const footerSlot = slots.footer
       const tabList = defaultSlot ? tabStaticOptions : tabOptions
 
+      const vns = [
+        h('div', {
+          key: 'ts',
+          class: 'vxe-tabs-slots'
+        }, defaultSlot ? defaultSlot({ name: activeName }) : [])
+      ]
+
+      if (tabPosition === 'right' || tabPosition === 'bottom') {
+        vns.push(
+          rendetTabBody(tabList),
+          renderTabHeader(tabList)
+        )
+      } else {
+        vns.push(
+          renderTabHeader(tabList),
+          rendetTabBody(tabList)
+        )
+      }
+
       return h('div', {
         ref: refElem,
-        class: ['vxe-tabs', `vxe-tabs--${type || 'default'}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
+        class: ['vxe-tabs', `pos--${tabPosition}`, `vxe-tabs--${tabType}`, `trigger--${trigger === 'manual' ? 'trigger' : 'default'}`, {
           'is--padding': padding,
           'is--height': height
         }],
-        style: height
-          ? {
-              height: toCssUnit(height)
-            }
-          : null
-      }, [
-        h('div', {
-          class: 'vxe-tabs-slots'
-        }, defaultSlot ? defaultSlot({}) : []),
-        renderTabHeader(tabList),
-        h('div', {
-          class: 'vxe-tabs-pane'
-        }, renderTabContent(tabList)),
-        footerSlot
-          ? h('div', {
-            class: 'vxe-tabs-footer'
-          }, callSlot(footerSlot, {}))
-          : renderEmptyElement($xeTabs)
-      ])
+        style: wrapperStyle
+      }, vns)
     }
 
+    watch(() => props.position, () => {
+      updateTabStyle()
+    })
+
     watch(() => props.modelValue, (val) => {
       addInitName(val, null)
       reactData.activeName = val

package/packages/ui/index.ts

@@ -559,6 +559,8 @@ setIcon({
   TABLE_SELECT_CLOSE: iconPrefix + 'caret-down',
 
   // tabs
+  TABS_TAB_BUTTON_TOP: iconPrefix + 'arrow-up',
+  TABS_TAB_BUTTON_BOTTOM: iconPrefix + 'arrow-down',
   TABS_TAB_BUTTON_LEFT: iconPrefix + 'arrow-left',
   TABS_TAB_BUTTON_RIGHT: iconPrefix + 'arrow-right',
   TABS_TAB_CLOSE: iconPrefix + 'close',