mirror of
https://github.com/ant-design/ant-design.git
synced 2025-08-06 16:06:28 +08:00
add tab mini size demo
This commit is contained in:
parent
d68846adc5
commit
b0bbbdd245
21
components/tabs/demo/size.md
Normal file
21
components/tabs/demo/size.md
Normal 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'));
|
||||||
|
````
|
||||||
|
|
@ -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 @@
|
|||||||
|
|
||||||
&-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 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&-mini &-nav-container {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-mini &-tab {
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
&-tabpane-hidden {
|
&-tabpane-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user