提交 b0bbbdd2 编写于 作者: A afc163

add tab mini size demo

上级 d68846ad
# 小一号
- 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'));
````
...@@ -2,15 +2,21 @@ ...@@ -2,15 +2,21 @@
var Tabs = require('rc-tabs'); var Tabs = require('rc-tabs');
var React = require('react'); var React = require('react');
var prefixCls = 'ant-tabs';
class AntTabs extends React.Component { class AntTabs extends React.Component {
render() { render() {
return <Tabs {...this.props}/>; var sizeCls = '';
if (this.props.size === 'mini') {
sizeCls = prefixCls + '-mini';
}
return <Tabs {...this.props} className={sizeCls} />;
} }
} }
AntTabs.defaultProps = { AntTabs.defaultProps = {
prefixCls: 'ant-tabs' prefixCls: prefixCls,
size: 'normal'
}; };
AntTabs.TabPane = Tabs.TabPane; AntTabs.TabPane = Tabs.TabPane;
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
&-nav-container { &-nav-container {
font-size: 14px; font-size: 14px;
line-height: 1.5; line-height: @line-height-base;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
position: relative; position: relative;
...@@ -177,6 +177,14 @@ ...@@ -177,6 +177,14 @@
} }
} }
&-mini &-nav-container {
font-size: 12px;
}
&-mini &-tab {
margin-right: 20px;
}
&-tabpane-hidden { &-tabpane-hidden {
display: none; display: none;
} }
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册