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" class="ant-switch-inner"
/> />
</span> </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 />
<br /> <br />
<ul <ul
@ -287,6 +301,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
style="width:240px;" style="width:240px;"
tabindex="0" 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 <li
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu" 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> <span>
<i <i
class="anticon anticon-mail" class="anticon anticon-appstore"
/> />
<span> <span>
Navigation One Navigation Three
</span> </span>
</span> </span>
</div> </div>
@ -311,46 +347,6 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
class="ant-menu ant-menu-inline ant-menu-sub" class="ant-menu ant-menu-inline ant-menu-sub"
id="sub1$Menu" id="sub1$Menu"
role="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 <li
aria-selected="false" aria-selected="false"
@ -368,10 +364,6 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
> >
Option 4 Option 4
</li> </li>
</ul>
</li>
</ul>
</li>
<li <li
class="ant-menu-submenu-inline ant-menu-submenu" 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-haspopup="true"
aria-owns="sub2$Menu" aria-owns="sub2$Menu"
class="ant-menu-submenu-title" class="ant-menu-submenu-title"
style="padding-left:24px;" style="padding-left:48px;"
> >
<span> Submenu
<i
class="anticon anticon-appstore"
/>
<span>
Navigation Two
</span>
</span>
</div> </div>
</li> </li>
</ul>
</li>
<li <li
class="ant-menu-submenu-inline ant-menu-submenu" class="ant-menu-submenu-inline ant-menu-submenu"
> >
<div <div
aria-expanded="false" aria-expanded="false"
aria-haspopup="true" aria-haspopup="true"
aria-owns="sub4$Menu" aria-owns="sub2$Menu"
class="ant-menu-submenu-title" class="ant-menu-submenu-title"
style="padding-left:24px;" style="padding-left:24px;"
> >
@ -407,7 +394,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
class="anticon anticon-setting" class="anticon anticon-setting"
/> />
<span> <span>
Navigation Three Navigation Four
</span> </span>
</span> </span>
</div> </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 ````jsx
import { Menu, Icon, Switch } from 'antd'; import { Menu, Icon, Switch } from 'antd';
const SubMenu = Menu.SubMenu; const { SubMenu } = Menu;
const MenuItemGroup = Menu.ItemGroup;
class Sider extends React.Component { class Sider extends React.Component {
state = { state = {
mode: 'inline', mode: 'inline',
theme: 'light',
} }
changeMode = (value) => { changeMode = (value) => {
this.setState({ this.setState({
mode: value ? 'vertical' : 'inline', mode: value ? 'vertical' : 'inline',
}); });
} }
changeTheme = (value) => {
this.setState({
theme: value ? 'dark' : 'light',
});
}
render() { render() {
return ( return (
<div> <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 />
<br /> <br />
<Menu <Menu
style={{ width: 240 }} style={{ width: 240 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
mode={this.state.mode} mode={this.state.mode}
theme={this.state.theme}
> >
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}> <Menu.Item key="1">
<MenuItemGroup title="Item 1"> <Icon type="mail" />
<Menu.Item key="1">Option 1</Menu.Item> Navigation One
<Menu.Item key="2">Option 2</Menu.Item> </Menu.Item>
</MenuItemGroup> <Menu.Item key="2">
<MenuItemGroup title="Item 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="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item> <Menu.Item key="4">Option 4</Menu.Item>
</MenuItemGroup> <SubMenu key="sub2" title="Submenu">
</SubMenu>
<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
<Menu.Item key="5">Option 5</Menu.Item> <Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</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> </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="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</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> </SubMenu>
</Menu> </Menu>
</div> </div>

Write Preview
Loading…
Cancel
Save