github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Tabs: fix style bug when nested with different tab positions

pull/9164/head
Leopoldthecoder 2018-01-07 12:22:21 +08:00 committed by 杨奕
parent 8f10ba50f2
commit 8c4dfd1aff
4 changed files with 47 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/tabs/src/tab-bar.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="el-tabs__active-bar" :style="barStyle"></div> <div class="el-tabs__active-bar" :class="`is-${ rootTabs.tabPosition }`" :style="barStyle"></div>
</template> </template>
<script> <script>
export default { export default {

3
packages/tabs/src/tab-nav.vue
View File

@ -196,6 +196,7 @@
<div <div
class={{ class={{
'el-tabs__item': true, 'el-tabs__item': true,
[`is-${ this.rootTabs.tabPosition }`]: true,
'is-active': pane.active, 'is-active': pane.active,
'is-disabled': pane.disabled, 'is-disabled': pane.disabled,
'is-closable': closable, 'is-closable': closable,
@ -219,7 +220,7 @@
); );
}); });
return ( return (
<div class={['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '']}> <div class={['el-tabs__nav-wrap', scrollable ? 'is-scrollable' : '', `is-${ this.rootTabs.tabPosition }`]}>
{scrollBtn} {scrollBtn}
<div class={['el-tabs__nav-scroll']} ref="navScroll"> <div class={['el-tabs__nav-scroll']} ref="navScroll">
<div class="el-tabs__nav" ref="nav" style={navStyle} role="tablist" on-keydown={ changeTab }> <div class="el-tabs__nav" ref="nav" style={navStyle} role="tablist" on-keydown={ changeTab }>

2
packages/tabs/src/tabs.vue
View File

@ -122,7 +122,7 @@
ref: 'nav' ref: 'nav'
}; };
const header = ( const header = (
<div class="el-tabs__header"> <div class={['el-tabs__header', `is-${tabPosition}`]}>
{newButton} {newButton}
<tab-nav { ...navData }></tab-nav> <tab-nav { ...navData }></tab-nav>
</div> </div>

69
packages/theme-chalk/src/tabs.scss
View File

@ -225,10 +225,12 @@
} }
} }
@include m((top, bottom)) { @include m((top, bottom)) {
.el-tabs__item:nth-child(2) { .el-tabs__item.is-top:nth-child(2),
.el-tabs__item.is-bottom:nth-child(2) {
padding-left: 0; padding-left: 0;
} }
.el-tabs__item:last-child { .el-tabs__item.is-top:last-child,
.el-tabs__item.is-bottom:last-child {
padding-right: 0; padding-right: 0;
} }
@ -243,21 +245,23 @@
} }
} }
@include m(bottom) { @include m(bottom) {
.el-tabs__header { .el-tabs__header.is-bottom {
margin-bottom: 0; margin-bottom: 0;
margin-top: 10px; margin-top: 10px;
} }
&.el-tabs--border-card { &.el-tabs--border-card {
.el-tabs__header { .el-tabs__header.is-bottom {
border-bottom: 0; border-bottom: 0;
border-top: 1px solid $--border-color-base; border-top: 1px solid $--border-color-base;
} }
.el-tabs__nav-wrap { .el-tabs__nav-wrap.is-bottom {
margin-top: -1px; margin-top: -1px;
margin-bottom: 0; margin-bottom: 0;
} }
.el-tabs__item { .el-tabs__item.is-bottom:not(.is-active) {
border: 1px solid transparent; border: 1px solid transparent;
}
.el-tabs__item.is-bottom {
margin: 0 -1px -1px -1px; margin: 0 -1px -1px -1px;
} }
} }
@ -265,20 +269,24 @@
@include m((left, right)) { @include m((left, right)) {
overflow: hidden; overflow: hidden;
.el-tabs__header, .el-tabs__header.is-left,
.el-tabs__nav-wrap, .el-tabs__header.is-right,
.el-tabs__nav-wrap.is-left,
.el-tabs__nav-wrap.is-right,
.el-tabs__nav-scroll { .el-tabs__nav-scroll {
height: 100%; height: 100%;
} }
.el-tabs__active-bar { .el-tabs__active-bar.is-left,
.el-tabs__active-bar.is-right {
top: 0; top: 0;
bottom: auto; bottom: auto;
width: 2px; width: 2px;
height: auto; height: auto;
} }
.el-tabs__nav-wrap { .el-tabs__nav-wrap.is-left,
.el-tabs__nav-wrap.is-right {
margin-bottom: 0; margin-bottom: 0;
&.is-scrollable { &.is-scrollable {
@ -296,7 +304,8 @@
.el-tabs__nav { .el-tabs__nav {
float: none; float: none;
} }
.el-tabs__item { .el-tabs__item.is-left,
.el-tabs__item.is-right {
display: block; display: block;
} }
@ -322,41 +331,41 @@
} }
} }
@include m(left) { @include m(left) {
.el-tabs__header { .el-tabs__header.is-left {
float: left; float: left;
margin-bottom: 0; margin-bottom: 0;
margin-right: 10px; margin-right: 10px;
} }
.el-tabs__nav-wrap { .el-tabs__nav-wrap.is-left {
margin-right: -1px; margin-right: -1px;
&::after { &::after {
left: auto; left: auto;
right: 0; right: 0;
} }
} }
.el-tabs__active-bar { .el-tabs__active-bar.is-left {
right: 0; right: 0;
left: auto; left: auto;
} }
.el-tabs__item { .el-tabs__item.is-left {
text-align: right; text-align: right;
} }
&.el-tabs--card { &.el-tabs--card {
.el-tabs__active-bar { .el-tabs__active-bar.is-left {
display: none; display: none;
} }
.el-tabs__item { .el-tabs__item.is-left {
border-left: none; border-left: none;
border-right: 1px solid $--border-color-light; border-right: 1px solid $--border-color-light;
border-bottom: none; border-bottom: none;
border-top: 1px solid $--border-color-light; border-top: 1px solid $--border-color-light;
} }
.el-tabs__item:first-child { .el-tabs__item.is-left:first-child {
border-right: 1px solid $--border-color-light; border-right: 1px solid $--border-color-light;
border-top: none; border-top: none;
} }
.el-tabs__item.is-active { .el-tabs__item.is-left.is-active {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-right-color: #fff; border-right-color: #fff;
border-left: none; border-left: none;
@ -382,10 +391,10 @@
} }
&.el-tabs--border-card { &.el-tabs--border-card {
.el-tabs__header { .el-tabs__header.is-left {
border-right: 1px solid #dfe4ed; border-right: 1px solid #dfe4ed;
} }
.el-tabs__item { .el-tabs__item.is-left {
border: 1px solid transparent; border: 1px solid transparent;
margin: -1px 0 -1px -1px; margin: -1px 0 -1px -1px;
@ -398,13 +407,13 @@
} }
} }
@include m(right) { @include m(right) {
.el-tabs__header { .el-tabs__header.is-right {
float: right; float: right;
margin-bottom: 0; margin-bottom: 0;
margin-left: 10px; margin-left: 10px;
} }
.el-tabs__nav-wrap { .el-tabs__nav-wrap.is-right {
margin-left: -1px; margin-left: -1px;
&::after { &::after {
left: 0; left: 0;
@ -412,23 +421,23 @@
} }
} }
.el-tabs__active-bar { .el-tabs__active-bar.is-right {
left: 0; left: 0;
} }
&.el-tabs--card { &.el-tabs--card {
.el-tabs__active-bar { .el-tabs__active-bar.is-right {
display: none; display: none;
} }
.el-tabs__item { .el-tabs__item.is-right {
border-bottom: none; border-bottom: none;
border-top: 1px solid $--border-color-light; border-top: 1px solid $--border-color-light;
} }
.el-tabs__item:first-child { .el-tabs__item.is-right:first-child {
border-left: 1px solid $--border-color-light; border-left: 1px solid $--border-color-light;
border-top: none; border-top: none;
} }
.el-tabs__item.is-active { .el-tabs__item.is-right.is-active {
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
border-left-color: #fff; border-left-color: #fff;
border-right: none; border-right: none;
@ -449,10 +458,10 @@
} }
} }
&.el-tabs--border-card { &.el-tabs--border-card {
.el-tabs__header { .el-tabs__header.is-right {
border-left: 1px solid #dfe4ed; border-left: 1px solid #dfe4ed;
} }
.el-tabs__item { .el-tabs__item.is-right {
border: 1px solid transparent; border: 1px solid transparent;
margin: -1px -1px -1px 0; margin: -1px -1px -1px 0;