add tab mini size demo

This commit is contained in:
afc163 2015-06-19 17:26:24 +08:00
parent d68846adc5
commit b0bbbdd245
3 changed files with 38 additions and 3 deletions

View File

@ -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'));
````

View File

@ -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;

View File

@ -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,14 @@
}
}
&-mini &-nav-container {
font-size: 12px;
}
&-mini &-tab {
margin-right: 20px;
}
&-tabpane-hidden {
display: none;
}