使antd的Sider响应
使antd的Sider响应
提问于 2019-07-23 21:55:31
我正在尝试用antd实现一个响应性的应用程序。我有一个Sider菜单作为我的主导航。我想做的一件事是，在小屏幕上，这个局外人会崩溃(更像汉堡的图标)。我都不知道该怎么开始。我的侧边栏组件如下所示：
class App extends React.Component {
render() {
return (
<Layout>
<Sider width={200} collapsedWidth={500}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</Menu>
</Sider>
</Layout>
);
}
}我还应该指出，从布局文档中可以看出以下几点：
注意:您可以通过设置断点获得响应性布局，当窗口宽度低于断点时，Sider将折叠到collapsedWidth的宽度。如果collapsedWidth设置为0，则会出现一个特殊触发器。
然而，我无法让这件事起作用。也许我误解了。
不幸的是，我无法在这里的编辑器中嵌入我的示例应用程序，所以我这是我的工作示例应用程序。我想做的就是把我的Sider肚脐折叠成一个汉堡包图标，甚至是一个小屏幕上的箭头状图标。我从这里要去哪里？
Stack Overflow用户
回答已采纳
发布于 2019-07-23 22:08:56
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57172717
复制相关文章
相似问题
腾讯云开发者
