Merge branch 'master' of github.com:ant-design/ant-design

components/tabs/demo/size.md

@@ -0,0 +1,21 @@
+# 小一号
+
+- order: 0
+
+用在弹出框等较狭窄的容器内。
+
+---
+
+````jsx
+var Tabs = antd.Tabs;
+var TabPane = Tabs.TabPane;
+
+React.render(
+  <Tabs defaultActiveKey="2" size="mini">
+    <TabPane tab="tab 1" key="1">选项卡一</TabPane>
+    <TabPane tab="tab 2" key="2">选项卡二</TabPane>
+    <TabPane tab="tab 3" key="3">选项卡三</TabPane>
+  </Tabs>
+, document.getElementById('components-tabs-demo-size'));
+````
+

components/tabs/index.jsx

@@ -2,15 +2,21 @@
 
 var Tabs = require('rc-tabs');
 var React = require('react');
+var prefixCls = 'ant-tabs';
 
 class AntTabs extends React.Component {
   render() {
-    return <Tabs {...this.props}/>;
+    var sizeCls = '';
+    if (this.props.size === 'mini') {
+      sizeCls = prefixCls + '-mini';
+    }
+    return <Tabs {...this.props} className={sizeCls} />;
   }
 }
 
 AntTabs.defaultProps = {
-  prefixCls: 'ant-tabs'
+  prefixCls: prefixCls,
+  size: 'normal'
 };
 
 AntTabs.TabPane = Tabs.TabPane;

style/components/tabs.less

@@ -31,7 +31,7 @@
 
   &-nav-container {
     font-size: 14px;
-    line-height: 1.5;
+    line-height: @line-height-base;
     box-sizing: border-box;
     width: 100%;
     position: relative;
@@ -177,6 +177,17 @@
     }
   }
 
+  &-mini &-nav-container {
+    font-size: 12px;
+  }
+
+  &-mini &-tab {
+    margin-right: 24px;
+    > a {
+      padding: 8px 16px;
+    }
+  }
+
   &-tabpane-hidden {
     display: none;
   }