Mirrors
/
ant-design
mirror of https://github.com/ant-design/ant-design.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update menu demo

Browse Source
pull/6533/head
afc163 8 years ago
parent fa88477886
commit 3a2f6bea18
2 changed files with 88 additions and 94 deletions
Show Stats Download Patch File Download Diff File

101
components/menu/__tests__/__snapshots__/demo.test.js.snap
Unescape Escape View File

@ -278,6 +278,20 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
class="ant-switch-inner"
/>
</span>
Change Mode
<span
class="ant-divider"
style="margin:0 1em;"
/>
<span
class="ant-switch"
tabindex="0"
>
<span
class="ant-switch-inner"
/>
</span>
Change Theme
<br />
<br />
<ul
@ -287,6 +301,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
style="width:240px;"
tabindex="0"
>
<li
aria-selected="true"
class="ant-menu-item-selected ant-menu-item"
role="menuitem"
style="padding-left:24px;"
>
<i
class="anticon anticon-mail"
/>
Navigation One
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:24px;"
>
<i
class="anticon anticon-calendar"
/>
Navigation Two
</li>
<li
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu"
>
@ -299,10 +335,10 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
>
<span>
<i
class="anticon anticon-mail"
class="anticon anticon-appstore"
/>
<span>
Navigation One
Navigation Three
</span>
</span>
</div>
@ -311,46 +347,6 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
class="ant-menu ant-menu-inline ant-menu-sub"
id="sub1$Menu"
role="menu"
>
<li
class=" ant-menu-item-group"
>
<div
class="ant-menu-item-group-title"
>
Item 1
</div>
<ul
class="ant-menu-item-group-list"
>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px;"
>
Option 1
</li>
<li
aria-selected="false"
class="ant-menu-item"
role="menuitem"
style="padding-left:48px;"
>
Option 2
</li>
</ul>
</li>
<li
class=" ant-menu-item-group"
>
<div
class="ant-menu-item-group-title"
>
Item 2
</div>
<ul
class="ant-menu-item-group-list"
>
<li
aria-selected="false"
@ -368,10 +364,6 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
>
Option 4
</li>
</ul>
</li>
</ul>
</li>
<li
class="ant-menu-submenu-inline ant-menu-submenu"
>
@ -380,25 +372,20 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
aria-haspopup="true"
aria-owns="sub2$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px;"
style="padding-left:48px;"
>
<span>
<i
class="anticon anticon-appstore"
/>
<span>
Navigation Two
</span>
</span>
Submenu
</div>
</li>
</ul>
</li>
<li
class="ant-menu-submenu-inline ant-menu-submenu"
>
<div
aria-expanded="false"
aria-haspopup="true"
aria-owns="sub4$Menu"
aria-owns="sub2$Menu"
class="ant-menu-submenu-title"
style="padding-left:24px;"
>
@ -407,7 +394,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
class="anticon anticon-setting"
/>
<span>
Navigation Three
Navigation Four
</span>
</span>
</div>

43
components/menu/demo/switch-mode.md
Unescape Escape View File

@ -15,52 +15,59 @@ Show the dynamic switching mode (between 'inline' and 'vertical').
````jsx
import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const { SubMenu } = Menu;
class Sider extends React.Component {
state = {
mode: 'inline',
theme: 'light',
}
changeMode = (value) => {
this.setState({
mode: value ? 'vertical' : 'inline',
});
}
changeTheme = (value) => {
this.setState({
theme: value ? 'dark' : 'light',
});
}
render() {
return (
<div>
<Switch onChange={this.changeMode} />
<Switch onChange={this.changeMode} /> Change Mode
<span className="ant-divider" style={{ margin: '0 1em' }} />
<Switch onChange={this.changeTheme} /> Change Theme
<br />
<br />
<Menu
style={{ width: 240 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode={this.state.mode}
theme={this.state.theme}
>
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="1">
<Icon type="mail" />
Navigation One
</Menu.Item>
<Menu.Item key="2">
<Icon type="calendar" />
Navigation Two
</Menu.Item>
<SubMenu key="sub1" title={<span><Icon type="appstore" /><span>Navigation Three</span></span>}>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
<SubMenu key="sub2" title="Submenu">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
<SubMenu key="sub2" title={<span><Icon type="setting" /><span>Navigation Four</span></span>}>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</div>

Write Preview
Loading…
Cancel
Save