--- 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 { MenuUnfold, MenuFold, User, VideoCamera, Upload as IconUpload } 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 (
nav 1 nav 2 nav 3
{React.createElement(this.state.collapsed ? MenuUnfold : MenuFold, { className: 'trigger', onClick: this.toggle, })}
Content
); } } ReactDOM.render(, mountNode); ``` ```css #components-layout-demo-custom-trigger .trigger { font-size: 18px; line-height: 64px; padding: 0 24px; cursor: pointer; transition: color 0.3s; } #components-layout-demo-custom-trigger .trigger:hover { color: #1890ff; } #components-layout-demo-custom-trigger .logo { height: 32px; background: rgba(255, 255, 255, 0.2); margin: 16px; } ```