Ant Design 的响应式 Sider 如何避免内容回流

How to avoid content reflow with Ant Design's responsive Sider

我希望响应式 Sider 组件扩展时不会导致 Content 组件中的元素回流,但我的渲染方法并非如此。

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>
  );
}

我想实现的是Ant Design's documentations site移动端访问时应用的Sider效果,视觉上把页面内容往右推

我用react检查工具查看了上面提到的网站,但我不知道是哪个官方组件做的。但是,我猜它混合了Ant Design Mobile中的Drawer组件,因为抽屉class在那里。

是否可以仅使用 Ant Design 中的组件来实现?

我想要什么



我倒塌的侧翼



我的扩展侧边

您可以使用 lib rc-drawer-menu

<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 pro 会像开箱即用的那样排序。为标准应用程序提供更多组件 您可以在此处为您的案例预览更多组件,查看 SLIDER 菜单。

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

好的。我们又过了一年。 当我在玩 https://ant.design/components/layout/ 上链接的 CodePen 并添加:

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

它对我很有效..