mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-15 17:31:25 +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 642a2b5b72322eb5f6d06d6eb644f877e7f6119c. * 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);