Merge pull request #417 from ant-design/feature-vertical-tabs

Add vertical tabs, fix #398

components/tabs/demo/size.md

@@ -1,6 +1,6 @@
 # 迷你型
 
-- order: 4
+- order: 5
 
 用在弹出框等较狭窄的容器内。
 

components/tabs/demo/vertical.md

@@ -0,0 +1,28 @@
+# 垂直
+
+- order: 4
+
+分成左右两种。
+
+---
+
+````jsx
+var Tabs = antd.Tabs;
+var TabPane = Tabs.TabPane;
+
+ReactDOM.render(<div>
+  <h3 style={{margin: '0 0 20px'}}>页签在左边</h3>
+  <Tabs defaultActiveKey="1" tabPosition="left">
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane>
+  </Tabs>
+  <h3 style={{margin: '40px 0 20px'}}>页签在右边</h3>
+  <Tabs defaultActiveKey="1" tabPosition="right">
+    <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
+    <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
+    <TabPane tab="选项卡三长" key="3">选项卡三内容</TabPane>
+  </Tabs>
+</div>, document.getElementById('components-tabs-demo-vertical'));
+````
+

components/tabs/index.jsx

@@ -4,12 +4,14 @@ const prefixCls = 'ant-tabs';
 
 class AntTabs extends React.Component {
   render() {
-    let sizeCls = '';
+    let className = (this.props.className || '');
     if (this.props.size === 'mini') {
-      sizeCls = prefixCls + '-mini';
+      className += ' ' + prefixCls + '-mini';
     }
-    const className = this.props.className || '';
-    return <Tabs {...this.props} className={className + ' ' + sizeCls}/>;
+    if (this.props.tabPosition === 'left' || this.props.tabPosition === 'right') {
+      className += ' ' + prefixCls + '-vertical';
+    }
+    return <Tabs {...this.props} className={className} />;
   }
 }
 

style/components/tabs.less

@@ -6,6 +6,7 @@
   outline: none;
   box-sizing: border-box;
   position: relative;
+  .clearfix;
 
   &-ink-bar {
     z-index: 1;
@@ -258,4 +259,100 @@
     transform: translateX(-100%);
     transition: transform @effect-duration @ease-in-out;
   }
+
+  &-vertical {
+    .@{tab-prefix-cls}-tab {
+      float: none;
+      margin-right: 0;
+      margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+      > .@{tab-prefix-cls}-tab-inner {
+        padding: 8px 24px;
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-scroll {
+      width: auto;
+    }
+
+    .@{tab-prefix-cls}-nav-container {
+      border-bottom: 0;
+    }
+
+    .@{tab-prefix-cls}-nav-wrap {
+      margin-bottom: 0;
+    }
+
+    .@{tab-prefix-cls}-ink-bar {
+      width: 2px;
+      left: auto;
+      height: auto;
+      &-transition-forward {
+        transition: bottom 0.3s @ease-in-out,
+        top 0.3s @ease-in-out 0.3s * 0.3;
+      }
+      &-transition-backward {
+        transition: bottom 0.3s @ease-in-out 0.3s * 0.3,
+        top 0.3s @ease-in-out;
+      }
+    }
+
+    .@{tab-prefix-cls}-container {
+      margin-bottom: 0;
+    }
+
+    .@{tab-prefix-cls}-content {
+      overflow: hidden;
+      width: auto;
+    }
+  }
+
+  &-vertical&-left {
+    .@{tab-prefix-cls}-tabs-bar {
+      float: left;
+    }
+    .@{tab-prefix-cls}-tab {
+      > .@{tab-prefix-cls}-tab-inner {
+        text-align: right;
+      }
+    }
+    .@{tab-prefix-cls}-nav-container {
+      border-right: 1px solid #e9e9e9;
+      margin-right: -1px;
+    }
+    .@{tab-prefix-cls}-nav-wrap {
+      margin-right: -1px;
+    }
+    .@{tab-prefix-cls}-ink-bar {
+      right: 0px;
+    }
+    .@{tab-prefix-cls}-content {
+      padding-left: 24px;
+      border-left: 1px solid #e9e9e9;
+      margin-left: -1px;
+    }
+  }
+
+  &-vertical&-right {
+    .@{tab-prefix-cls}-tabs-bar {
+      float: right;
+    }
+    .@{tab-prefix-cls}-nav-container {
+      border-left: 1px solid #e9e9e9;
+      margin-left: -1px;
+    }
+    .@{tab-prefix-cls}-nav-wrap {
+      margin-left: -1px;
+    }
+    .@{tab-prefix-cls}-ink-bar {
+      left: 0px;
+    }
+    .@{tab-prefix-cls}-content {
+      padding-right: 24px;
+      border-right: 1px solid #e9e9e9;
+      margin-right: -1px;
+    }
+  }
 }