mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
fix: menu[mode='vertical'] can not show submenu in Layout.Sider (#4904)
* fix menu[mode='vertical'] can not show submenu in Layout.Sider close #4890 improve Layout demo * del useless css
This commit is contained in:
ddcat1115
Benjy Cui
parent
5ff8723a9f
commit
7d3cbfd9d9
@ -81,6 +81,7 @@ export default class Sider extends React.Component<SiderProps, any> {
|
||||
const divStyle = {
|
||||
...style,
|
||||
flex: `0 0 ${this.state.collapsed ? collapsedWidth : width}px`,
|
||||
width: `${this.state.collapsed ? collapsedWidth : width}px`,
|
||||
};
|
||||
const iconObj = {
|
||||
'expanded': reverseArrow ? <Icon type="right" /> : <Icon type="left" />,
|
||||
|
||||
@ -25,7 +25,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
|
||||
class="ant-layout ant-layout-has-sider">
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="flex:0 0 200px;">
|
||||
style="flex:0 0 200px;width:200px;">
|
||||
Sider
|
||||
</div>
|
||||
<div
|
||||
@ -52,7 +52,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="flex:0 0 200px;">
|
||||
style="flex:0 0 200px;width:200px;">
|
||||
Sider
|
||||
</div>
|
||||
</div>
|
||||
@ -65,7 +65,7 @@ exports[`test renders ./components/layout/demo/basic.md correctly 1`] = `
|
||||
class="ant-layout ant-layout-has-sider">
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="flex:0 0 200px;">
|
||||
style="flex:0 0 200px;width:200px;">
|
||||
Sider
|
||||
</div>
|
||||
<div
|
||||
@ -92,7 +92,7 @@ exports[`test renders ./components/layout/demo/custom-trigger.md correctly 1`] =
|
||||
class="ant-layout ant-layout-has-sider">
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="flex:0 0 200px;">
|
||||
style="flex:0 0 200px;width:200px;">
|
||||
<div
|
||||
class="logo" />
|
||||
<ul
|
||||
@ -160,7 +160,7 @@ exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
class="ant-layout ant-layout-has-sider">
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="flex:0 0 200px;">
|
||||
style="flex:0 0 200px;width:200px;">
|
||||
<div
|
||||
class="logo" />
|
||||
<ul
|
||||
@ -168,76 +168,54 @@ exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
|
||||
role="menu"
|
||||
tabindex="0">
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu">
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-owns="sub1$Menu"
|
||||
class="ant-menu-submenu-title"
|
||||
style="padding-left:24px;">
|
||||
<span>
|
||||
<i
|
||||
class="anticon anticon-user" />
|
||||
<span
|
||||
class="nav-text">
|
||||
User
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu">
|
||||
<div
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
aria-owns="sub2$Menu"
|
||||
class="ant-menu-submenu-title"
|
||||
style="padding-left:24px;">
|
||||
<span>
|
||||
<i
|
||||
class="anticon anticon-team" />
|
||||
<span
|
||||
class="nav-text">
|
||||
Team
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="true"
|
||||
class="ant-menu-item-selected ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;">
|
||||
<i
|
||||
class="anticon anticon-user" />
|
||||
<span
|
||||
class="nav-text">
|
||||
nav 1
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;">
|
||||
<i
|
||||
class="anticon anticon-video-camera" />
|
||||
<span
|
||||
class="nav-text">
|
||||
nav 2
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;">
|
||||
<i
|
||||
class="anticon anticon-upload" />
|
||||
<span
|
||||
class="nav-text">
|
||||
nav 3
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;">
|
||||
<i
|
||||
class="anticon anticon-user" />
|
||||
<span
|
||||
class="nav-text">
|
||||
nav 4
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;">
|
||||
<i
|
||||
class="anticon anticon-heart-o" />
|
||||
<span
|
||||
class="nav-text">
|
||||
nav 5
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
aria-selected="false"
|
||||
class="ant-menu-item"
|
||||
role="menuitem"
|
||||
style="padding-left:24px;">
|
||||
<i
|
||||
class="anticon anticon-team" />
|
||||
<span
|
||||
class="nav-text">
|
||||
nav 6
|
||||
<span>
|
||||
<i
|
||||
class="anticon anticon-file" />
|
||||
<span
|
||||
class="nav-text">
|
||||
File
|
||||
</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -261,7 +239,7 @@ exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
<span>
|
||||
<span
|
||||
class="ant-breadcrumb-link">
|
||||
Home
|
||||
User
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator">
|
||||
@ -271,17 +249,7 @@ exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
<span>
|
||||
<span
|
||||
class="ant-breadcrumb-link">
|
||||
List
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator">
|
||||
/
|
||||
</span>
|
||||
</span>
|
||||
<span>
|
||||
<span
|
||||
class="ant-breadcrumb-link">
|
||||
App
|
||||
Bill
|
||||
</span>
|
||||
<span
|
||||
class="ant-breadcrumb-separator">
|
||||
@ -291,7 +259,7 @@ exports[`test renders ./components/layout/demo/side.md correctly 1`] = `
|
||||
</div>
|
||||
<div
|
||||
style="padding:24px;background:#fff;min-height:360px;">
|
||||
content
|
||||
Bill is a cat.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
@ -461,7 +429,7 @@ exports[`test renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
style="padding:24px 0;background:#fff;">
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="background:#fff;flex:0 0 200px;">
|
||||
style="background:#fff;flex:0 0 200px;width:200px;">
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
|
||||
@ -16,14 +16,19 @@ Be used in the two-columns layout.
|
||||
````jsx
|
||||
import { Layout, Menu, Breadcrumb, Icon } from 'antd';
|
||||
const { Header, Content, Footer, Sider } = Layout;
|
||||
const SubMenu = Menu.SubMenu;
|
||||
|
||||
class SiderDemo extends React.Component {
|
||||
state = {
|
||||
collapsed: false,
|
||||
mode: 'inline',
|
||||
};
|
||||
onCollapse = (collapsed) => {
|
||||
console.log(collapsed);
|
||||
this.setState({ collapsed });
|
||||
this.setState({
|
||||
collapsed,
|
||||
mode: collapsed ? 'vertical' : 'inline',
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
@ -34,30 +39,27 @@ class SiderDemo extends React.Component {
|
||||
onCollapse={this.onCollapse}
|
||||
>
|
||||
<div className="logo" />
|
||||
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
|
||||
<Menu.Item key="1">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 1</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="2">
|
||||
<Icon type="video-camera" />
|
||||
<span className="nav-text">nav 2</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="3">
|
||||
<Icon type="upload" />
|
||||
<span className="nav-text">nav 3</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="4">
|
||||
<Icon type="user" />
|
||||
<span className="nav-text">nav 4</span>
|
||||
</Menu.Item>
|
||||
<Menu.Item key="5">
|
||||
<Icon type="heart-o" />
|
||||
<span className="nav-text">nav 5</span>
|
||||
</Menu.Item>
|
||||
<Menu theme="dark" mode={this.state.mode} defaultSelectedKeys={['6']}>
|
||||
<SubMenu
|
||||
key="sub1"
|
||||
title={<span><Icon type="user" /><span className="nav-text">User</span></span>}
|
||||
>
|
||||
<Menu.Item key="1">Tom</Menu.Item>
|
||||
<Menu.Item key="2">Bill</Menu.Item>
|
||||
<Menu.Item key="3">Alex</Menu.Item>
|
||||
</SubMenu>
|
||||
<SubMenu
|
||||
key="sub2"
|
||||
title={<span><Icon type="team" /><span className="nav-text">Team</span></span>}
|
||||
>
|
||||
<Menu.Item key="4">Team 1</Menu.Item>
|
||||
<Menu.Item key="5">Team 2</Menu.Item>
|
||||
</SubMenu>
|
||||
<Menu.Item key="6">
|
||||
<Icon type="team" />
|
||||
<span className="nav-text">nav 6</span>
|
||||
<span>
|
||||
<Icon type="file" />
|
||||
<span className="nav-text">File</span>
|
||||
</span>
|
||||
</Menu.Item>
|
||||
</Menu>
|
||||
</Sider>
|
||||
@ -65,12 +67,11 @@ class SiderDemo extends React.Component {
|
||||
<Header style={{ background: '#fff', padding: 0 }} />
|
||||
<Content style={{ margin: '0 16px' }}>
|
||||
<Breadcrumb style={{ margin: '12px 0' }}>
|
||||
<Breadcrumb.Item>Home</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>List</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>App</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>User</Breadcrumb.Item>
|
||||
<Breadcrumb.Item>Bill</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
|
||||
content
|
||||
Bill is a cat.
|
||||
</div>
|
||||
</Content>
|
||||
<Footer style={{ textAlign: 'center' }}>
|
||||
@ -100,4 +101,8 @@ ReactDOM.render(<SiderDemo />, mountNode);
|
||||
#components-layout-demo-side .ant-layout-sider-collapsed .nav-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#components-layout-demo-side .ant-layout-sider-collapsed .ant-menu-submenu-vertical > .ant-menu-submenu-title:after {
|
||||
display: none;
|
||||
}
|
||||
````
|
||||
|
||||
@ -37,8 +37,6 @@
|
||||
}
|
||||
|
||||
&-sider {
|
||||
flex: 0 0 200px;
|
||||
overflow: hidden;
|
||||
transition: all .3s @ease-out;
|
||||
position: relative;
|
||||
background: @layout-sider-background;
|
||||
@ -51,10 +49,6 @@
|
||||
order: 1;
|
||||
}
|
||||
|
||||
&-collapsed {
|
||||
flex: 0 0 64px;
|
||||
}
|
||||
|
||||
&-trigger {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user