在 Antd React App 中像 Sider/Drawer 一样重新创建 Ant Design Pro

Question

我正在尝试将我的 Antd React 应用程序的 style/css 配置为移动就绪。

我的主菜单使用 here.

中看到的 Reactive Sider Menu

我的问题是，当我使用移动视口查看时，它有点难看，而且它会挤压菜单外的所有内容。 expand/condense 菜单的小选项卡涵盖了我的一些其他组件。

我更喜欢他们在 Ant Design Pro 演示中的设计。

但我不确定如何准确地创建它。以前有人尝试过吗？它似乎在移动视口中使用抽屉，而不是在布局中使用 Sider API。

Answer 1

想通了。

基本上我的解决方案（不确定这是否是他们在 Ant Design Pro 中实际所做的）是在桌面上使用 Reactive Sider Menu 示例，在移动设备上使用 Drawer。

Reactive Sider Menu 示例中的同一个 Toggle 按钮可以 hide/close Sider（桌面版）和抽屉（移动版）。

诀窍是使用 CSS 媒体查询在桌面隐藏抽屉并在移动设备中隐藏 Sider，这样每个人都可以做自己的事情。

CSS

.hideOnMobile {
  display: none;
}
@media only screen and (min-width: 768px) {
  .hideOnMobile {
    display: block;
  }
}

.hideOnDesktop {
  display: block;
}
@media only screen and (min-width: 768px) {
  .hideOnDesktop {
    display: none;
  }
}

App.js

const App = () => {
  // sider and drawer toggle
  const [isToggled, setToggled] = useState(false);
  const toggleTrueFalse = () => setToggled(!isToggled);
  const onClose = () => {
    setToggled(false);
  };

  return (
            <Layout style={{ minHeight: "100vh" }}>
              <Drawer
                placement="left"
                onClose={onClose}
                closable={false}
                visible={isToggled}
                className="hideOnDesktop"
                bodyStyle={{ backgroundColor: "#001529", padding: "0" }}
              >
                <Navbar />
              </Drawer>
              <Sider
                breakpoint="lg"
                collapsedWidth="0"
                collapsed={isToggled}
                onBreakpoint={(broken) => {
                  setToggled(broken);
                }}
                className="hideOnMobile"
              >
                <Navbar />
              </Sider>
              <Layout className="site-layout">
                <Header
                  className="site-layout-background"
                  style={{ padding: 0 }}
                >
                  <Row>
                    {React.createElement(
                      isToggled ? MenuUnfoldOutlined : MenuFoldOutlined,
                      {
                        className: "trigger",
                        onClick: toggleTrueFalse,
                      }
                    )}
                    <TopNavbar />
                  </Row>
                </Header> 
...

另外，根据抽屉组件的 Antd 文档，您可以使用 bodyStyle 属性来设置背景颜色并移除填充，以便菜单与抽屉的两侧齐平。

在 Antd React App 中像 Sider/Drawer 一样重新创建 Ant Design Pro

Recreate Ant Design Pro like Sider/Drawer in Antd React App

reactjs

antd

ant-design-pro