Skip to content

Commit

Permalink
fix(Tabs): Tabs component selected style problems.
Browse files Browse the repository at this point in the history
  • Loading branch information
@jaywcjlove
jaywcjlove committed Nov 7, 2017
1 parent 149fbae commit 26436ca
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 105 deletions.
33 changes: 21 additions & 12 deletions src/tabs/Tabs.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { Component, PropTypes } from '../utils/';
import { Component, PropTypes, ReactDOM } from '../utils/';
import Transition from '../transition';
import Icon from '../icon';

Expand Down Expand Up @@ -28,6 +28,8 @@ export default class Tabs extends Component {
updateFirstMount() {
this.setState({
isFirstMount: false
}, () => {
this.calcSlideStyle()
})
}
calcSlideStyle() {
Expand Down Expand Up @@ -95,8 +97,13 @@ export default class Tabs extends Component {
React.Children.map(children, (item, idx) => {
const { label, disabled } = item.props;
return (
<Transition in={true}>
<div ref={(elm) => elm && this.tabsBar.push(elm)} className={this.classNames(`${prefixCls}-tab`, {
<Transition ref={(elm) => {
let _elm = ReactDOM.findDOMNode(elm)
if (_elm) {
this.tabsBar.push(_elm)
}
}} in={true} unmountOnExit={false}>
<div className={this.classNames(`${prefixCls}-tab`, {
'w-disabled': disabled,
'w-active': item.key === activeKey,
'w-closable': closable
Expand All @@ -116,16 +123,18 @@ export default class Tabs extends Component {
React.Children.map(children, item => {
const { key, props } = item;
return (
<Transition in={key === activeKey} sequence={props.sequence ? props.sequence : sequence} mountOnEnter={false} unmountOnExit={false}>
<div ref={(elm) => {
if (elm && key === activeKey) {
// 设置内容高度
let timer = setTimeout(() => {
clearTimeout(timer)
this.refs.tabcon.style.height = elm.clientHeight + 'px';
})
<Transition
ref={(elm) => {
let _elm = ReactDOM.findDOMNode(elm);
if (_elm && key === activeKey && _elm.clientHeight && this.refs.tabcon) {
this.refs.tabcon.style.height = _elm.clientHeight + 'px';
}
}} className={this.classNames(`${prefixCls}-pane`, {
}}
in={key === activeKey} sequence={props.sequence ? props.sequence : sequence}
mountOnEnter={false}
unmountOnExit={false}
>
<div className={this.classNames(`${prefixCls}-pane`, {
'w-disabled': props.disabled,
})}> {props.children} </div>
</Transition>
Expand Down
170 changes: 77 additions & 93 deletions src/tabs/style/index.less
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,25 @@
@import "../../style/variables.less";
// @import "../../style/mixins/index.less";
.w-tabs{
@w-tabs:~'w-tabs';
.@{w-tabs}{
overflow: hidden;
position: relative;
font-size: 14px;
&-content{
position: relative;
.w-tabs-pane{
position: absolute;
width: 100%;
&.is-unmounted{
display: none;
}
}
&-pane{
position: absolute;
width: 100%;
&.is-unmounted{
display: none;
}
}
}

.w-tabs .w-tabs-bar{
position: relative;
border-bottom: 1px solid #d9d9d9;
z-index: 9;
.w-tabs-tab{
&-bar{
position: relative;
border-bottom: 1px solid #d9d9d9;
z-index: 9;
}
&-tab{
display: inline-block;
height: 100%;
box-sizing: border-box;
Expand All @@ -39,8 +38,7 @@
color: #108ee9;
}
}

.w-tabs-slide{
&-slide{
z-index: 1;
position: absolute;
left: 0;
Expand All @@ -51,97 +49,83 @@
width: 50px;
transition: all @transition-time @transition-timing-functio;
}
}

.w-tabs.w-tabs-line{
.w-tabs-bar{
&-line &-bar{
margin-bottom: 16px;
outline: none;
.w-tabs-tab{
padding: 8px 20px;
}
}
&-line &-bar &-tab{
padding: 8px 20px;
}
}

.w-tabs.w-tabs-card{
.w-tabs-bar{
.w-tabs-tab{
margin: 0;
border: 1px solid #d9d9d9;
border-bottom: 0;
padding: 7px 18px 7px;
border-radius: 4px 4px 0 0;
background: #f9f9f9;
margin-right: 2px;
bottom: -1px;
.w-icon-close{
position: absolute;
filter: none;
display: inline-block;
text-align: center;
vertical-align: baseline;
width: 14px;
height: 14px;
top: 50%;
right: -2px;
margin-top: -7px;
&:hover{
color: white;
border-radius: 50%;
background: #dc3545;
}
}
&.w-disabled{
border: 1px solid #e8e8e8;
border-bottom: 0;
.@{w-tabs}{
&-card &-bar &-tab{
margin: 0;
border: 1px solid #d9d9d9;
border-bottom: 0;
padding: 7px 18px 7px;
border-radius: 4px 4px 0 0;
background: #f9f9f9;
margin-right: 2px;
bottom: -1px;
.w-icon-close{
width: 14px;
height: 14px;
font-size: 12px;
margin: 0 0 0 4px;
&:before{
margin: -2px 0 0 0;
}
&.w-active{
background: #fff;
border-color: #d9d9d9;
padding-top: 7px;
padding-bottom: 8px;
&:hover{
color: white;
border-radius: 50%;
background: #dc3545;
}
}
&.w-disabled{
border: 1px solid #e8e8e8;
border-bottom: 0;
}
&.w-active{
background: #fff;
border-color: #d9d9d9;
padding-top: 7px;
padding-bottom: 8px;
}
}
}


// 位置
.w-tabs-vertical{
&:after,&:before{
content: " ";
display: table;
}
&:after{
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
// 对齐样式
&-vertical{
&:after,&:before{
content: " ";
display: table;
}
&:after{
clear: both;
visibility: hidden;
font-size: 0;
height: 0;
}
}
.w-tabs-bar{
&-vertical &-bar{
border-bottom: 0;
height: 100%;
.w-tabs-tab{
display: block;
}
}
&>.w-tabs-content{
&-vertical &-tab{
display: block;
}
&-vertical &-content{
overflow: hidden;
width: auto;
}
&.w-tabs-left{
.w-tabs-bar{
float: left;
border-right: 1px solid #e9e9e9;
}
.w-tabs-content {
padding-left: 24px;
}
&-vertical &-left &-bar{
float: left;
border-right: 1px solid #e9e9e9;
}
&.w-tabs-right{
.w-tabs-bar{
float: right;
border-left: 1px solid #e9e9e9;
}
&-vertical &-left &-content{
padding-left: 24px;
}
}
&-vertical &-right &-bar{
float: right;
border-left: 1px solid #e9e9e9;
}
}

0 comments on commit 26436ca

Please sign in to comment.