home/ant-design
2
0
Fork 0
mirror of https://github.com/wahyd4/ant-design.git synced 2026-08-23 19:56:20 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: vertical tab bar height should follow tabs height (#5809)

Browse Source 
* fix: vertical tab bar height should follow tabs height

* docs: update demo for Tabs
This commit is contained in:
Benjy Cui
2017-04-22 09:43:32 +08:00
committed by ddcat1115
parent 70b89e9316
commit 0a2fb1817f
3 changed files with 223 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/tabs/__tests__/__snapshots__/demo.test.js.snap
+176 -131
View File
@@ -853,157 +853,202 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
`;
exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
<div
class="ant-tabs ant-tabs-top ant-tabs-line"
>
<div>
<div
class="ant-tabs-bar"
role="tablist"
tabindex="0"
class="ant-radio-group"
style="margin-bottom:8px;"
>
<label
class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
>
<span
class="ant-radio-button ant-radio-button-checked"
>
<input
checked=""
class="ant-radio-button-input"
type="radio"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Horizontal
</span>
</label>
<label
class="ant-radio-button-wrapper"
>
<span
class="ant-radio-button"
>
<input
class="ant-radio-button-input"
type="radio"
/>
<span
class="ant-radio-button-inner"
/>
</span>
<span>
Vertical
</span>
</label>
</div>
<div
class="ant-tabs ant-tabs-top ant-tabs-line"
style="height:220px;"
>
<div
class="ant-tabs-nav-container"
class="ant-tabs-bar"
role="tablist"
tabindex="0"
>
<div
class="ant-tabs-nav-wrap"
class="ant-tabs-nav-container"
>
<div
class="ant-tabs-nav-scroll"
class="ant-tabs-nav-wrap"
>
<div
class="ant-tabs-nav ant-tabs-nav-animated"
class="ant-tabs-nav-scroll"
>
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
<div
aria-disabled="false"
aria-selected="true"
class="ant-tabs-tab-active ant-tabs-tab"
role="tab"
class="ant-tabs-nav ant-tabs-nav-animated"
>
Tab 1
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 2
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 3
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 4
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 5
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 6
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 7
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 8
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 9
<div
class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
/>
<div
aria-disabled="false"
aria-selected="true"
class="ant-tabs-tab-active ant-tabs-tab"
role="tab"
>
Tab 1
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 2
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 3
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 4
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 5
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 6
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 7
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 8
</div>
<div
aria-disabled="false"
aria-selected="false"
class=" ant-tabs-tab"
role="tab"
>
Tab 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-tabs-content ant-tabs-content-animated"
style="margin-left:0%;"
>
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
class="ant-tabs-content ant-tabs-content-animated"
style="margin-left:0%;"
>
Content of tab 1
<div
aria-hidden="false"
class="ant-tabs-tabpane ant-tabs-tabpane-active"
role="tabpanel"
>
Content of tab 1
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
</div>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
<div
aria-hidden="true"
class="ant-tabs-tabpane ant-tabs-tabpane-inactive"
role="tabpanel"
/>
</div>
</div>
`;
components/tabs/demo/slide.md
+41 -14
View File
@@ -14,20 +14,47 @@ title:
Tab can be slide to left or right, which is used for a lot of tabs.
````jsx
import { Tabs } from 'antd';
import { Tabs, Radio } from 'antd';
const TabPane = Tabs.TabPane;
ReactDOM.render(
<Tabs defaultActiveKey="1">
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
<TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
<TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
<TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
<TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
<TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
<TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
</Tabs>
, mountNode);
class SlidingTabsDemo extends React.Component {
constructor(props) {
super(props);
this.state = {
mode: 'top',
};
}
handleModeChange = (e) => {
const mode = e.target.value;
this.setState({ mode });
}
render() {
const { mode } = this.state;
return (
<div>
<Radio.Group onChange={this.handleModeChange} value={mode} style={{ marginBottom: 8 }}>
<Radio.Button value="top">Horizontal</Radio.Button>
<Radio.Button value="left">Vertical</Radio.Button>
</Radio.Group>
<Tabs
defaultActiveKey="1"
tabPosition={mode}
style={{ height: 220 }}
>
<TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
<TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
<TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
<TabPane tab="Tab 4" key="4">Content of tab 4</TabPane>
<TabPane tab="Tab 5" key="5">Content of tab 5</TabPane>
<TabPane tab="Tab 6" key="6">Content of tab 6</TabPane>
<TabPane tab="Tab 7" key="7">Content of tab 7</TabPane>
<TabPane tab="Tab 8" key="8">Content of tab 8</TabPane>
<TabPane tab="Tab 9" key="9">Content of tab 9</TabPane>
</Tabs>
</div>
);
}
}
ReactDOM.render(<SlidingTabsDemo />, mountNode);
````
components/tabs/style/index.less
+6
View File
@@ -216,6 +216,7 @@
&-vertical {
> .@{tab-prefix-cls}-bar {
border-bottom: 0;
height: 100%;
.@{tab-prefix-cls}-tab {
float: none;
@@ -233,6 +234,11 @@
width: auto;
}
.@{tab-prefix-cls}-nav-container,
.@{tab-prefix-cls}-nav-wrap {
height: 100%;
}
.@{tab-prefix-cls}-nav-container {
margin-bottom: 0;
padding: 32px 0;