提交 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 @@
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;
......
......@@ -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;
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册