React Bootstrap 或其他用于 in-canvas 到 off-canvas 解决方案的库

Question

我的项目正在使用 React Bootstrap，但是我正在努力寻找与 Foundation 的 in-canvas to off-canvas 功能等效的功能，其中一些内容是在页面的正常流动中可用，但随后在较小的屏幕尺寸上进入关闭 canvas 菜单。 https://get.foundation/sites/docs/off-canvas.html#in-canvas-to-off-canvas

有谁知道任何其他 React 插件也能做到这一点？

为清楚起见，我尝试这样做：

（桌面）（手机）

(手机打开菜单)

Answer 1

使用 OffCanvas 创建一个 NavBar 组件，它在小断点处展开（展开 = 隐藏菜单图标）。
创建 Content2 组件并将其放在 in-canvas 屏幕和 OffCanvas 组件中。
使用媒体查询切换 Content2 组件在 in-canvas 屏幕

App.js:

<Stack className="min-vh-100">
    <Navbar expand="sm" className="px-3 bg-primary">
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Offcanvas
          id="offcanvasNavbar"
          aria-labelledby="offcanvasNavbarLabel"
          placement="end"
        >
            <Offcanvas.Header closeButton>
                <Offcanvas.Title id="offcanvasNavbarLabel">
                    Offcanvas
                </Offcanvas.Title>
            </Offcanvas.Header>
            <Offcanvas.Body>
                <Content2 />
            </Offcanvas.Body>
        </Navbar.Offcanvas>
    </Navbar>
    <Stack direction="horizontal" className="flex-grow-1 align-items-stretch">
        <div className="bg-info flex-fill w-50 d-flex justify-content-center align-items-center">
            Content 1
        </div>
        <div className="content2 w-50">
            <Content2 />
        </div>
    </Stack>
</Stack>

css:

.content2 {
  display: block;
}

@media screen and (max-width: 576px) {
  .content2 {
    display: none;
  }
}

https://codesandbox.io/s/fancy-snow-w2ug5w

React Bootstrap 或其他用于 in-canvas 到 off-canvas 解决方案的库

React Bootstrap or other library for in-canvas to off-canvas solution

responsive-design

reactjs

react-bootstrap