diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md new file mode 100644 index 0000000000000000000000000000000000000000..81360382e2d744f0bef4da77d11b788f5ad3aa64 --- /dev/null +++ b/components/tabs/demo/size.md @@ -0,0 +1,21 @@ +# 小一号 + +- order: 0 + +用在弹出框等较狭窄的容器内。 + +--- + +````jsx +var Tabs = antd.Tabs; +var TabPane = Tabs.TabPane; + +React.render( + + 选项卡一 + 选项卡二 + 选项卡三 + +, document.getElementById('components-tabs-demo-size')); +```` + diff --git a/components/tabs/index.jsx b/components/tabs/index.jsx index 27571b0fd0dc07afec4d7a87a28c888ad6c5cd5e..5e45ec740ead2e3a522973dfd7ba233ef38646f4 100644 --- a/components/tabs/index.jsx +++ b/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 ; + var sizeCls = ''; + if (this.props.size === 'mini') { + sizeCls = prefixCls + '-mini'; + } + return ; } } AntTabs.defaultProps = { - prefixCls: 'ant-tabs' + prefixCls: prefixCls, + size: 'normal' }; AntTabs.TabPane = Tabs.TabPane; diff --git a/style/components/tabs.less b/style/components/tabs.less index 23110d9c208fdce135bd8fbb17bd0b6b1e3c803e..ec050c4bb040abc64fedc41c08e5a67da4c00d25 100644 --- a/style/components/tabs.less +++ b/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,14 @@ } } + &-mini &-nav-container { + font-size: 12px; + } + + &-mini &-tab { + margin-right: 20px; + } + &-tabpane-hidden { display: none; }