mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 13:59:11 +08:00
2.4 KiB
2.4 KiB
order | title | debug | ||||
---|---|---|---|---|---|---|
99 |
|
true |
zh-CN
修改内容前,请尝试此 Demo 查看样式是否抖动。
import {
DesktopOutlined,
FileOutlined,
MenuFoldOutlined,
MenuUnfoldOutlined,
PieChartOutlined,
TeamOutlined,
UserOutlined,
} from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';
const { Header, Sider, Content } = Layout;
const items: MenuProps['items'] = [
{
key: '1',
icon: <PieChartOutlined />,
label: 'Option 1',
},
{
key: '2',
icon: <DesktopOutlined />,
label: 'Option 2',
},
{
key: 'sub1',
icon: <UserOutlined />,
label: 'User',
children: [
{
key: '3',
label: 'Tom',
},
{
key: '4',
label: 'Bill',
},
{
key: '5',
label: 'Alex',
},
],
},
{
key: 'sub2',
icon: <TeamOutlined />,
label: 'Team',
children: [
{
key: '6',
label: 'Team 1',
},
{
key: '7',
label: 'Team 2',
},
],
},
{
key: '9',
icon: <FileOutlined />,
},
];
const App: React.FC = () => {
const [collapsed, setCollapsed] = useState(true);
return (
<Layout>
<Sider trigger={null} collapsible collapsed={collapsed}>
<div className="logo" />
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['3']}
defaultOpenKeys={['sub1']}
items={items}
/>
</Sider>
<Layout>
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: () => setCollapsed(!collapsed),
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
};
export default App;
#components-layout-demo-custom-trigger .trigger {
padding: 0 24px;
font-size: 18px;
line-height: 64px;
cursor: pointer;
transition: color 0.3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
color: #1890ff;
}