Merge pull request #20 from ibigbug/tab-style

Tab style

components/tabs/demo/basic.md

@@ -7,16 +7,16 @@
 ---
 
 ````jsx
-var Tabs = antd.Tabs;
-var TabPane = Tabs.TabPane;
+var Tab = antd.Tab;
+var TabPane = Tab.TabPane;
 
 function callback() {}
 
 React.render(
-  <Tabs defaultActiveKey="2" onChange={callback}>
+  <Tab defaultActiveKey="2" onChange={callback}>
     <TabPane tab="tab 1" key="1">选项卡一</TabPane>
     <TabPane tab="tab 2" key="2">选项卡二</TabPane>
     <TabPane tab="tab 3" key="3">选项卡三</TabPane>
-  </Tabs>
+  </Tab>
 , document.getElementById('components-tabs-demo-basic'));
 ````

components/tabs/demo/disabled.md

@@ -0,0 +1,22 @@
+# 带有禁用
+
+- order: 2
+
+禁用某一项
+
+---
+
+````jsx
+var Tab = antd.Tab;
+var TabPane = Tab.TabPane;
+
+function callback() {}
+
+React.render(
+  <Tab defaultActiveKey="1" onChange={callback}>
+    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
+    <TabPane tab="tab 2" disabled={true} key="2">选项卡二</TabPane>
+    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
+  </Tab>
+, document.getElementById('components-tabs-demo-disabled'));
+````

components/tabs/demo/slide.md

@@ -0,0 +1,25 @@
+# 滑动
+
+- order: 2
+
+可以滑动
+
+---
+
+````jsx
+var Tab = antd.Tab;
+var TabPane = Tab.TabPane;
+
+function callback() {}
+
+React.render(
+  <Tab defaultActiveKey="1" onChange={callback}>
+    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
+    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
+    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
+    <TabPane tab="tab 4" key="4">选项卡四</TabPane>
+    <TabPane tab="tab 5" key="5">选项卡五</TabPane>
+    <TabPane tab="tab 6" key="6">选项卡六</TabPane>
+  </Tab>
+, document.getElementById('components-tabs-demo-slide'));
+````

components/tabs/index.jsx

@@ -1,11 +1,11 @@
 'use strict';
 
-var Tabs = require('rc-tabs');
+var Tab = require('rc-tabs');
 var React = require('react');
 
 class AntTabs extends React.Component {
   render() {
-    return <Tabs {...this.props}/>;
+    return <Tab {...this.props}/>;
   }
 }
 
@@ -13,6 +13,6 @@ AntTabs.defaultProps = {
   prefixCls: 'ant-tabs'
 };
 
-AntTabs.TabPane = Tabs.TabPane;
+AntTabs.TabPane = Tab.TabPane;
 
 module.exports = AntTabs;

components/tabs/index.md

@@ -1,4 +1,4 @@
-# Tabs
+# Tab
 
 - category: Components
 - chinese: 标签页
@@ -10,20 +10,20 @@
 
 ## API
 
-### Tabs
+### Tab
 
-| 参数             | 说明                                         | 类型     | 默认值     |
-|------------------|----------------------------------------------|----------|------------|
-| activeKey        | 当前激活 tab 面板的 key                      | String   | 无         |
-| animation           | 是否启用面板切换动画                         | String  | 空。目前只支持 slide-horizontal       |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String   | 第一个面板 |
-| onChange         | 切换面板的回调                               | Function | 无         |
-| onTabClick       | tab 被点击的回调                             | Function | 无         |
+| 参数             | 说明                                         | 类型     | 默认值                          |
+|------------------|----------------------------------------------|----------|---------------------------------|
+| activeKey        | 当前激活 tab 面板的 key                      | String   | 无                              |
+| animation        | 是否启用面板切换动画                         | String   | 空。目前只支持 slide-horizontal |
+| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | String   | 第一个面板                      |
+| onChange         | 切换面板的回调                               | Function | 无                              |
+| onTabClick       | tab 被点击的回调                             | Function | 无                              |
 
 
-### Tabs.TabPane
+### Tab.TabPane
 
-| 参数 | 说明                | 类型   | 默认值 |
-|------|---------------------|--------|--------|
-| key  | 对应 activeKey      | String | 无     |
-| tab  | 选项卡头显示文字|React.Element or String | 无     |
+| 参数 | 说明             | 类型                    | 默认值 |
+|------|------------------|-------------------------|--------|
+| key  | 对应 activeKey   | String                  | 无     |
+| tab  | 选项卡头显示文字 | React.Element or String | 无     |

index.js

@@ -3,7 +3,7 @@ require('./style/index.less');
 var antd = {
   Datepicker: require('./components/datepicker'),
   Tooltip: require('./components/tooltip'),
-  Tabs: require('./components/tabs'),
+  Tab: require('./components/tabs'),
   Modal: require('./components/modal'),
   Menu: require('rc-menu'),
   Dropdown: require('./components/dropdown'),

style/components/tab.less

@@ -136,7 +136,10 @@
     div.@{prefixClass}-tab-disabled {
       pointer-events: none;
       cursor: default;
-      color: #ccc;
+
+      a {
+        color: #ccc;
+      }
     }
 
     .@{prefixClass}-tab {
@@ -153,6 +156,7 @@
         margin-bottom: 4px;
         font-weight: 500;
         display: inline-block;
+        color: #666;
       }
 
       > a:hover {