mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-15 08:59:15 +08:00
a67d39cd6c
* docs: Update Menu cn doc * chore: update ts def * chore: support convert * docs: more demo * docs: more demo * docs: all menu demos * docs: dropdown demo * docs: dropdown all demos * docs: update demo * test: coverage * docs: more demo * docs: layout demo * docs: all demo * chore: fix ts lint * docs: fix doc * docs: all docs
2.1 KiB
Executable File
2.1 KiB
Executable File
| order | title | ||||
|---|---|---|---|---|---|
| 6 |
|
zh-CN
展示动态切换模式。
en-US
Show the dynamic switching mode (between inline and vertical).
import { Menu, Switch, Divider, MenuProps } from 'antd';
import {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
LinkOutlined,
} from '@ant-design/icons';
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
label: React.ReactNode,
key?: React.Key | null,
icon?: React.ReactNode,
children?: MenuItem[],
): MenuItem {
return {
key,
icon,
children,
label,
} as MenuItem;
}
const items: MenuItem[] = [
getItem('Navigation One', '1', <MailOutlined />),
getItem('Navigation Two', '2', <CalendarOutlined />),
getItem('Navigation Two', 'sub1', <AppstoreOutlined />, [
getItem('Option 3', '3'),
getItem('Option 4', '4'),
getItem('Submenu', 'sub1-2', null, [getItem('Option 5', '5'), getItem('Option 6', '6')]),
]),
getItem('Navigation Three', 'sub2', <SettingOutlined />, [
getItem('Option 7', '7'),
getItem('Option 8', '8'),
getItem('Option 9', '9'),
getItem('Option 10', '10'),
]),
getItem(
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Ant Design
</a>,
'link',
<LinkOutlined />,
),
];
const Demo = () => {
const [mode, setMode] = React.useState<'inline' | 'vertical'>('inline');
const [theme, setTheme] = React.useState<'dark' | 'light'>('light');
const changeMode = (value: boolean) => {
setMode(value ? 'vertical' : 'inline');
};
const changeTheme = (value: boolean) => {
setTheme(value ? 'dark' : 'light');
};
return (
<>
<Switch onChange={changeMode} /> Change Mode
<Divider type="vertical" />
<Switch onChange={changeTheme} /> Change Style
<br />
<br />
<Menu
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode={mode}
theme={theme}
items={items}
/>
</>
);
};
ReactDOM.render(<Demo />, mountNode);