mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 09:49:57 +08:00
2843bd32dd
* Add theme support to Menu.SubMenu
* Tidy up docs
* Tidy up docs
* Update components/menu/index.en-US.md
* Update components/menu/index.en-US.md
Co-authored-by: Amumu <yoyo837@hotmail.com>
* Add Chinese lang docs
* Extend menu theme demo to additionally demonstrate Sub-menu theming
* Add submenu theme demo
* Revert "Extend menu theme demo to additionally demonstrate Sub-menu theming"
This reverts commit 642a2b5b72
.
* Add tests
* Correct typo
* Make demo vertical so absolutely positioned popover doesn't overflow
* Make demo functional component
* Update components/menu/index.en-US.md
Co-authored-by: afc163 <afc163@gmail.com>
* Update components/menu/index.zh-CN.md
Co-authored-by: Amumu <yoyo837@hotmail.com>
* Update components/menu/demo/submenu-theme.md
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: Amumu <yoyo837@hotmail.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
1.5 KiB
Executable File
1.5 KiB
Executable File
order | title | ||||
---|---|---|---|---|---|
5 |
|
zh-CN
内建了两套主题 light
和 dark
,默认 light
。
en-US
The Sub-menu will inherit the theme of Menu
, but you can override this at the SubMenu
level via the theme
prop.
import { Menu, Switch } from 'antd';
import { MailOutlined } from '@ant-design/icons';
const { SubMenu } = Menu;
const SubMenuTheme = () => {
const [theme, setTheme] = React.useState('light');
const [current, setCurrent] = React.useState('1');
const changeTheme = value => {
setTheme(value ? 'dark' : 'light');
};
const handleClick = e => {
setCurrent(e.key);
};
return (
<>
<Switch
checked={theme === 'dark'}
onChange={changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
onClick={handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[current]}
mode="vertical"
theme="dark"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One" theme={theme}>
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
</SubMenu>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</Menu>
</>
);
};
ReactDOM.render(<SubMenuTheme />, mountNode);