如何利用Ant设计的响应评测器避免内容重流

Question

我希望响应的Sider组件能够扩展，而不会导致内容组件中的元素重新流，这在我的呈现方法中不是这样的，如下所示。

import 'antd/dist/antd.css';

// ...skipped

render() {
  return (
    <Layout>
      <Sider
        breakpoint="sm"
        collapsedWidth="0"
        onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
        style={{ minHeight: "100vh" }}
      >
        <Menu theme="dark" mode="inline" selectedKeys={['1']}>
          <Menu.Item key="1">
            <Icon type="user" />
            <span className="nav-text">nav 1</span>
          </Menu.Item>
          <Menu.Item key="2">
            <Icon type="video-camera" />
            <span className="nav-text">nav 2</span>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '10px', padding: "15px" }}>
          <ListOfData />
        </Content>
      </Layout>
    </Layout>
  );
}

我想要实现的是，当使用移动视图端口访问蚂蚁设计文档网站时，Sider效果将页面内容可视化地推到右边。

我用react检查工具查看了上面提到的站点，但是我不知道使用哪个官方组件来完成这个任务。但是，我猜它混合了中的抽屉组件，因为抽屉类就在那里。

是否可以仅使用来自Ant设计的组件来实现这一目标？

我想要的

​

我的崩溃的锡德

​

我的扩展Sider

​

Answer 1

您可以使用库rc抽屉菜单。

<Drawer width="240px">
      <Menu
        style={{ width: 240, height: '200%' }}
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
      >
        <SubMenu
          key="sub1"
          title={<span><Icon type="mail" /><span>Navigation One</span></span>}
        >
          <MenuItemGroup key="g1" title="Item 1">
            <Menu.Item key="1">Option 1</Menu.Item>
            <Menu.Item key="2">Option 2</Menu.Item>
          </MenuItemGroup>
          <MenuItemGroup key="g2" title="Item 2">
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </MenuItemGroup>
        </SubMenu>
        <SubMenu
          key="sub2"
          title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}
        >
          <Menu.Item key="5">Option 5</Menu.Item>
          <Menu.Item key="6">Option 6</Menu.Item>
          <SubMenu key="sub3" title="Submenu">
            <Menu.Item key="7">Option 7</Menu.Item>
            <Menu.Item key="8">Option 8</Menu.Item>
          </SubMenu>
        </SubMenu>
        <SubMenu
          key="sub4"
          title={<span><Icon type="setting" /><span>Navigation Three</span></span>}
        >
          <Menu.Item key="9">Option 9</Menu.Item>
          <Menu.Item key="10">Option 10</Menu.Item>
          <Menu.Item key="11">Option 11</Menu.Item>
          <Menu.Item key="12">Option 12</Menu.Item>
        </SubMenu>
      </Menu>
    </Drawer>
    <div
      style={{
        width: '100%', height: 667, background: '#fff000',
        color: '#fff', textAlign: 'center', lineHeight: '667px',
      }}
    >
      内容区块
    </div>

我相信使用antd会把它从盒子里拿出来。有了更多用于标准应用程序的组件，您可以在这里预览更多的组件，在这里可以查看滑块菜单。

https://preview.pro.ant.design/#/

Answer 2

好的。我们还有一年的时间。当我使用CodePen时，它是在https://ant.design/components/layout/上链接的，并添加：

<Sider
  ..
  style={{position: "absolute", height: "100vh"}}
  ..

对我来说很有效..。