diff --git a/src/tab/main.scss b/src/tab/main.scss index 0bea5b91e8..3b77ae5cd2 100644 --- a/src/tab/main.scss +++ b/src/tab/main.scss @@ -230,6 +230,14 @@ /* Shape: wrapped(top) */ &-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar { + position: relative; + #{$tab-prefix}-nav-extra { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + } + #{$tab-prefix}-tab { margin-right: $tab-wrapped-tab-margin-right; @include tabs-tab-border( @@ -260,6 +268,14 @@ /* Shape: wrapped(bottom) */ &-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-bar { + position: relative; + #{$tab-prefix}-nav-extra { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + } + #{$tab-prefix}-tab { margin-right: $tab-wrapped-tab-margin-right; @include tabs-tab-border( $tab-wrapped-bar-border, null, $tab-wrapped-tab-bottom-border-radius, $tab-wrapped-border-line-color-hover, $tab-wrapped-bg-color-selected, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color, $tab-wrapped-border-line-color); @@ -370,3 +386,5 @@ } } } + +@import "./rtl.scss"; diff --git a/src/tab/rtl.scss b/src/tab/rtl.scss new file mode 100644 index 0000000000..2cc589ecf7 --- /dev/null +++ b/src/tab/rtl.scss @@ -0,0 +1,17 @@ +@import "../core/index-noreset.scss"; + +#{$tab-prefix}[dir="rtl"] { + &#{$tab-prefix}-wrapped#{$tab-prefix}-top > #{$tab-prefix}-bar { + #{$tab-prefix}-nav-extra { + right: auto; + left: 0; + } + } + + &#{$tab-prefix}-wrapped#{$tab-prefix}-bottom > #{$tab-prefix}-bar { + #{$tab-prefix}-nav-extra { + right: auto; + left: 0; + } + } +} diff --git a/src/tab/tab.jsx b/src/tab/tab.jsx index 55eb547ced..d70256a3ba 100644 --- a/src/tab/tab.jsx +++ b/src/tab/tab.jsx @@ -14,6 +14,7 @@ export default class Tab extends Component { static propTypes = { prefix: PropTypes.string, + rtl: PropTypes.bool, /** * 被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换 */ @@ -232,6 +233,7 @@ export default class Tab extends Component { className, onClose, children, + rtl, ...others } = this.props; const { activeKey } = this.state; @@ -282,7 +284,7 @@ export default class Tab extends Component { tabChildren.reverse(); } - return (
+ return (
{tabChildren}
); } diff --git a/src/tab/tabs/nav.jsx b/src/tab/tabs/nav.jsx index 64013f0e0f..b4bb8e22f5 100644 --- a/src/tab/tabs/nav.jsx +++ b/src/tab/tabs/nav.jsx @@ -10,7 +10,6 @@ import { events } from '../../util'; import { triggerEvents, getOffsetLT, getOffsetWH, isTransformSupported } from './utils'; const noop = () => {}; -const floatRight = { float: 'right', position: 'relative', zIndex: 1 }; const { Popup } = Overlay; class Nav extends React.Component { @@ -441,7 +440,7 @@ class Nav extends React.Component { key: 'nav-extra', }; if (tabPosition === 'top' || tabPosition === 'bottom') { - navChildren.unshift(
{extra}
); + navChildren.unshift(
{extra}
); } else { navChildren.push(
{extra}
); }