从 react-bootstrap 制作侧边栏

Question

我正在尝试在这里创建一个像这张图片一样的 Bootstrap 侧边栏。

我查看了 react-bootstrap 和 Twitter Bootstrap 上的所有代码，但我还没有找到如何编写代码。基本上，如果他们在桌面上查看，我希望侧边栏可见，否则隐藏。

当页面上的内容上下滚动时，侧边栏应该保持静止。

原文由 RussellHarrower 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的，所以对于那些想要制作侧边栏的人来说，不幸的是，你必须自己制作。

我所做的是以下。

1. 请参阅 https://github.com/StartBootstrap/startbootstrap-simple-sidebar 中的示例
2. 在您的应用程序的某处创建 sidebar.js。

>  import React from "react";
> import {Nav} from "react-bootstrap";
> import { withRouter } from "react-router";
> import '../pages/style/Dashboard.css'
>
> const Side = props => {
>
>
>     return (
>         <>
>
>             <Nav className="col-md-12 d-none d-md-block bg-light sidebar"
>             activeKey="/home"
>             onSelect={selectedKey => alert(`selected ${selectedKey}`)}
>             >
>                 <div className="sidebar-sticky"></div>
>             <Nav.Item>
>                 <Nav.Link href="/home">Active</Nav.Link>
>             </Nav.Item>
>             <Nav.Item>
>                 <Nav.Link eventKey="link-1">Link</Nav.Link>
>             </Nav.Item>
>             <Nav.Item>
>                 <Nav.Link eventKey="link-2">Link</Nav.Link>
>             </Nav.Item>
>             <Nav.Item>
>                 <Nav.Link eventKey="disabled" disabled>
>                 Disabled
>                 </Nav.Link>
>             </Nav.Item>
>             </Nav>
>
>         </>
>         );
>   };
>   const Sidebar = withRouter(Side);
>   export default Sidebar
>
> ```

1. 我的 Dashboard.css 中有以下内容。

> ```
>   .sidebar {
>         position: fixed;
>         top: 0;
>         bottom: 0;
>         left: 0;
>         min-height: 100vh !important;
>         z-index: 100;
>         padding: 48px 0 0;
>         box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
>     }
>     #sidebar-wrapper{
>         min-height: 100vh !important;
>         width: 100vw;
>         margin-left: -1rem;
>         -webkit-transition: margin .25s ease-out;
>         -moz-transition: margin .25s ease-out;
>         -o-transition: margin .25s ease-out;
>         transition: margin .25s ease-out;
>     }
>     #sidebar-wrapper .sidebar-heading {
>         padding: 0.875rem 1.25rem;
>         font-size: 1.2rem;
>     }
>
>     #page-content-wrapper {
>         min-width: 0;
>         width: 100%;
>     }
>
> ```

然后最后一步在您希望它显示的文件中执行以下操作

import React from “react”; import {Container, Row, Col, Card, Form, Button } from “react-bootstrap”; import { withRouter } from “react-router”; import Sidebar from “../moduls/sidebar.js”; import ‘./style/Dashboard.css’

const Dash = props => {

return (
    <>
     <Container fluid>
            <Row>
                <Col xs={2} id="sidebar-wrapper">
                  <Sidebar />
                </Col>
                <Col  xs={10} id="page-content-wrapper">
                    this is a test
                </Col>
            </Row>

        </Container>
    </>
    );

}; const Dashboard = withRouter(Dash); export default Dashboard

”`

原文由 RussellHarrower 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

截至 2022 年，将有一个名为 react-boostrap-sidebar-menu 的纯 react-boostrap 组件。它是迄今为止最干净的解决方案，并且非常可定制。

https://www.npmjs.com/package/react-bootstrap-sidebar-menu

https://github.com/ivp-dev/react-bootstrap-sidebar-menu

import SidebarMenu from 'react-bootstrap-sidebar-menu';

<SidebarMenu>
  <SidebarMenu.Header>
    <SidebarMenu.Brand>
      {/* Your brand icon */}
    </SidebarMenu.Brand>
    <SidebarMenu.Toggle />
  </SidebarMenu.Header>
  <SidebarMenu.Body>
    <SidebarMenu.Nav>
      <SidebarMenu.Nav.Link>
        <SidebarMenu.Nav.Icon>
          {/* Menu item icon */}
        </SidebarMenu.Nav.Icon>
        <SidebarMenu.Nav.Title>
          {/* Menu item title */}
        </SidebarMenu.Nav.Title>
      </SidebarMenu.Nav.Link>
    <SidebarMenu.Nav/>
    <SidebarMenu.Sub>
      <SidebarMenu.Sub.Toggle>
        <SidebarMenu.Nav.Icon />
        <SidebarMenu.Nav.Title>
          {/* Submenu title */}
        </SidebarMenu.Nav.Title>
      </SidebarMenu.Sub.Toggle>
      <SidebarMenu.Sub.Collapse>
        <SidebarMenu.Nav>
          <SidebarMenu.Nav.Link>
            <SidebarMenu.Nav.Icon>
              {/* Submenu item icon */}
            </SidebarMenu.Nav.Icon>
            <SidebarMenu.Nav.Title>
              {/* Submenu item title */}
            </SidebarMenu.Nav.Title>
          </SidebarMenu.Nav.Link>
        </SidebarMenu.Nav>
      </SidebarMenu.Sub.Collapse>
    </SidebarMenu.Sub>
  <SidebarMenu.Body/>
</SidebarMenu>

原文由 Phyo Arkar Lwin 发布，翻译遵循 CC BY-SA 4.0 许可协议