--- order: 4 title: zh-CN: 自定义触发器 en-US: Custom trigger --- ## zh-CN 要使用自定义触发器,可以设置 `trigger={null}` 来隐藏默认设定。 ## en-US If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`. ```jsx import { Layout, Menu } from 'antd'; import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined, VideoCameraOutlined, UploadOutlined, } from '@ant-design/icons'; const { Header, Sider, Content } = Layout; class SiderDemo extends React.Component { state = { collapsed: false, }; toggle = () => { this.setState({ collapsed: !this.state.collapsed, }); }; render() { return (
, label: 'nav 1', }, { key: '2', icon: , label: 'nav 2', }, { key: '3', icon: , label: 'nav 3', }, ]} />
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, { className: 'trigger', onClick: this.toggle, })}
Content
); } } export default () => ; ``` ```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; } #components-layout-demo-custom-trigger .logo { height: 32px; margin: 16px; background: rgba(255, 255, 255, 0.3); } .site-layout .site-layout-background { background: #fff; } ```