时间戳

首页 > 解决方案 > 在 Antd React App 中重新创建类似 Sider/Drawer 的 Ant Design Pro

reactjs - 在 Antd React App 中重新创建类似 Sider/Drawer 的 Ant Design Pro

问题描述

我正在尝试将我的 Antd React 应用程序的样式/css 配置为可移动。

我的主菜单使用这里看到的反应侧边菜单。

我的问题是，当我使用移动视口查看时，它有点难看，并且会挤压菜单之外的所有内容。扩展/压缩菜单的小标签涵盖了我的其他一些组件。

菜单

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

蚂蚁金服

但我不确定如何准确地创建它。有没有人尝试过？它似乎在移动视口中使用 Drawer，而不是在 Layout API 中使用 Sider。

标签： reactjsantdant-design-pro

解决方案

想通了。

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

Reactive Sider Menu 示例中的相同切换按钮可以隐藏/关闭 Sider（在桌面中）和 Drawer（在移动中）。

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

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

应用程序.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> 
...

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

推荐阅读