mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

Extend menu theme demo to additionally demonstrate Sub-menu theming

Browse Source
This commit is contained in:
David Ollerhead 2022-02-09 16:38:12 +00:00
parent 120e2fe503
commit 642a2b5b72
1 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/menu/demo/theme.md
View File

@ -11,7 +11,7 @@ title:
## en-US ## en-US
There are two built-in themes: `light` and `dark`. The default value is `light`. There are two built-in themes: `light` and `dark`. The default value is `light`. They can be applied to the `Menu`, and the Sub-menu will inherit this, or you can override at the `SubMenu` level
```jsx ```jsx
import { Menu, Switch } from 'antd'; import { Menu, Switch } from 'antd';
@ -21,13 +21,20 @@ const { SubMenu } = Menu;
class Sider extends React.Component { class Sider extends React.Component {
state = { state = {
theme: 'dark', menuTheme: 'dark',
subMenuTheme: 'dark',
current: '1', current: '1',
}; };
changeTheme = value => { changeMenuTheme = value => {
this.setState({ this.setState({
theme: value ? 'dark' : 'light', menuTheme: value ? 'dark' : 'light',
});
};
changeSubMenuTheme = value => {
this.setState({
subMenuTheme: value ? 'dark' : 'light',
}); });
}; };
@ -41,23 +48,37 @@ class Sider extends React.Component {
render() { render() {
return ( return (
<> <>
Menu Theme:{' '}
<Switch <Switch
checked={this.state.theme === 'dark'} checked={this.state.menuTheme === 'dark'}
onChange={this.changeTheme} onChange={this.changeMenuTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
Sub-Menu Theme: <Switch
checked={this.state.subMenuTheme === 'dark'}
onChange={this.changeSubMenuTheme}
checkedChildren="Dark" checkedChildren="Dark"
unCheckedChildren="Light" unCheckedChildren="Light"
/> />
<br /> <br />
<br /> <br />
<Menu <Menu
theme={this.state.theme} theme={this.state.menuTheme}
onClick={this.handleClick} onClick={this.handleClick}
style={{ width: 256 }} style={{ width: 256 }}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]} selectedKeys={[this.state.current]}
mode="inline" mode="inline"
> >
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One"> <SubMenu
key="sub1"
icon={<MailOutlined />}
title="Navigation One"
theme={this.state.subMenuTheme}
>
<Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item> <Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item> <Menu.Item key="3">Option 3</Menu.Item>