Question

我正在尝试使用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>
    );
  }
}

我可能还应该指出，在Layout docs中，有以下说法：

注意：您可以通过设置断点来获得响应式布局，当窗口宽度低于断点时，Sider会折叠为collapsedWidth的宽度。如果将lapsedWidth设置为0，则会出现一个特殊的触发器。

但是我无法使它正常工作。也许我误会了。

很遗憾，我无法将示例应用程序嵌入此处的编辑器中，因此我here is my working sample app。我要做的就是将Sider导航栏折叠成一个汉堡包图标，甚至在小屏幕上变成一个箭头之类的图标。我从这里去哪里？

Answer 1

您有collapsible一方official example。

从这里您可以根据状态选择所需的宽度\图标。

此外，您还有antd个组件中的good example个，尤其是带有汉堡图标的边栏。

使antd的Sider响应

1 个答案: