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

Posted 2023-03-07

【中文标题】在 Antd React App 中重新创建类似 Sider/Drawer 的 Ant Design Pro

【英文标题】：Recreate Ant Design Pro like Sider/Drawer in Antd React App

【发布时间】：2020-10-11 15:55:38

【问题描述】：

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

我的主菜单使用 here 所见的反应式侧边菜单。

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

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

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

【参考方案1】：

想通了。

基本上我的解决方案（不确定这是否是他们在 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;
  

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> 
...

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