mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-17 02:18:07 +08:00
133 lines
2.4 KiB
Markdown
133 lines
2.4 KiB
Markdown
---
|
|
order: 99
|
|
title:
|
|
zh-CN: 自定义触发器 Debug
|
|
en-US: Custom trigger debug
|
|
debug: true
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
修改内容前,请尝试此 Demo 查看样式是否抖动。
|
|
|
|
```tsx
|
|
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;
|
|
```
|
|
|
|
```css
|
|
#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;
|
|
}
|
|
```
|