test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-03 04:30:06 +08:00
Code Issues Actions 100 Packages Projects Releases Wiki Activity

update tabs style

Browse Source
This commit is contained in:
afc163 2015-08-06 16:47:01 +08:00
parent f8b19f3bc8
commit c2933a8e52
6 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/tabs/demo/basic.md
View File

@ -2,7 +2,7 @@
- order: 0 - order: 0
默认选中第二项。 默认选中第一项。
--- ---
@ -15,10 +15,10 @@ function callback(key) {
} }
React.render( React.render(
<Tabs defaultActiveKey="2" onChange={callback}> <Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="tab 1" key="1">选项卡一</TabPane> <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="tab 2" key="2">选项卡二</TabPane> <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane> <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
</Tabs> </Tabs>
, document.getElementById('components-tabs-demo-basic')); , document.getElementById('components-tabs-demo-basic'));
```` ````

6
components/tabs/demo/disabled.md
View File

@ -14,9 +14,9 @@ function callback(key) {}
React.render( React.render(
<Tabs defaultActiveKey="1" onChange={callback}> <Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="tab 1" key="1">选项卡一</TabPane> <TabPane tab="选项卡一" key="1">选项卡一</TabPane>
<TabPane tab="tab 2" disabled={true} key="2">选项卡二</TabPane> <TabPane tab="选项卡二" disabled={true} key="2">选项卡二</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane> <TabPane tab="选项卡三" key="3">选项卡三</TabPane>
</Tabs> </Tabs>
, document.getElementById('components-tabs-demo-disabled')); , document.getElementById('components-tabs-demo-disabled'));
```` ````

14
components/tabs/demo/icon.md
View File

@ -10,19 +10,17 @@
var Tabs = antd.Tabs; var Tabs = antd.Tabs;
var TabPane = Tabs.TabPane; var TabPane = Tabs.TabPane;
function callback(key) {}
var tabContent = [ var tabContent = [
<span><i className="anticon anticon-apple"></i>tab 1</span>, <span><i className="anticon anticon-apple"></i>选项卡一</span>,
<span><i className="anticon anticon-android"></i>tab 2</span>, <span><i className="anticon anticon-android"></i>选项卡二</span>,
<span><i className="anticon anticon-lock"></i>tab 3</span>, <span><i className="anticon anticon-lock"></i>选项卡三</span>,
]; ];
React.render( React.render(
<Tabs defaultActiveKey="2" onChange={callback}> <Tabs defaultActiveKey="2">
<TabPane tab={tabContent[0]} key="1">选项卡一</TabPane> <TabPane tab={tabContent[0]} key="1">选项卡一</TabPane>
<TabPane tab={tabContent[1]} key="2">选项卡一</TabPane> <TabPane tab={tabContent[1]} key="2">选项卡二</TabPane>
<TabPane tab={tabContent[2]} key="3">选项卡一</TabPane> <TabPane tab={tabContent[2]} key="3">选项卡三</TabPane>
</Tabs> </Tabs>
, document.getElementById('components-tabs-demo-icon')); , document.getElementById('components-tabs-demo-icon'));
```` ````

6
components/tabs/demo/size.md
View File

@ -12,9 +12,9 @@ var TabPane = Tabs.TabPane;
React.render( React.render(
<Tabs defaultActiveKey="2" size="mini"> <Tabs defaultActiveKey="2" size="mini">
<TabPane tab="tab 1" key="1">选项卡一</TabPane> <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
<TabPane tab="tab 2" key="2">选项卡二</TabPane> <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane> <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>
</Tabs> </Tabs>
, document.getElementById('components-tabs-demo-size')); , document.getElementById('components-tabs-demo-size'));
```` ````

18
components/tabs/demo/slide.md
View File

@ -14,15 +14,15 @@ function callback(key) {}
React.render( React.render(
<Tabs defaultActiveKey="1" onChange={callback}> <Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="tab 1" key="1">选项卡一</TabPane> <TabPane tab="选项一" key="1">选项卡一</TabPane>
<TabPane tab="tab 2" key="2">选项卡二</TabPane> <TabPane tab="选项二" key="2">选项卡二</TabPane>
<TabPane tab="tab 3" key="3">选项卡三</TabPane> <TabPane tab="选项三" key="3">选项卡三</TabPane>
<TabPane tab="tab 4" key="4">选项卡四</TabPane> <TabPane tab="选项四" key="4">选项卡四</TabPane>
<TabPane tab="tab 5" key="5">选项卡五</TabPane> <TabPane tab="选项五" key="5">选项卡五</TabPane>
<TabPane tab="tab 6" key="6">选项卡六</TabPane> <TabPane tab="选项六" key="6">选项卡六</TabPane>
<TabPane tab="tab 7" key="7">选项卡七</TabPane> <TabPane tab="选项七" key="7">选项卡七</TabPane>
<TabPane tab="tab 8" key="8">选项卡八</TabPane> <TabPane tab="选项八" key="8">选项卡八</TabPane>
<TabPane tab="tab 9" key="9">选项卡九</TabPane> <TabPane tab="选项九" key="9">选项卡九</TabPane>
</Tabs> </Tabs>
, document.getElementById('components-tabs-demo-slide')); , document.getElementById('components-tabs-demo-slide'));
```` ````

16
style/components/tabs.less
View File

@ -34,15 +34,18 @@
width: 100%; width: 100%;
position: relative; position: relative;
white-space: nowrap; white-space: nowrap;
padding-right: 32px; border-bottom: 1px solid #e9e9e9;
border-bottom: 1px solid #f3f3f3;
margin-bottom: 15px; margin-bottom: 15px;
.clearfix; .clearfix;
} }
&-nav-container-scrolling {
padding-left: 32px;
padding-right: 32px;
}
&-tab-prev, &-tab-next { &-tab-prev, &-tab-next {
user-select: none; user-select: none;
-webkit-user-select: none;
z-index: 2; z-index: 2;
margin-right: -2px; margin-right: -2px;
margin-top: 1px; margin-top: 1px;
@ -79,6 +82,12 @@
} }
} }
&-tab-btn-disabled {
cursor: default;
color: #ccc;
pointer-events: none;
}
&-tab-next { &-tab-next {
right: 2px; right: 2px;
@ -89,7 +98,6 @@
&-tab-prev { &-tab-prev {
left: 0; left: 0;
background: #fff;
transform: rotate(180deg); transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
&-icon:before { &-icon:before {