logo标签列表

使用react-bootstrap制作侧边栏

htmlcsstwitter-bootstrapsidebar
34

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

sidebar

我查看了react-bootstrap和Twitter Bootstrap上的所有代码，但我仍然找不到如何编写此代码的指南。基本上，如果他们在台式机上查看该网页，我希望侧边栏可见，否则将其隐藏。

侧边栏应保持静止，而页面上的内容会向上和向下滚动。

你是在问如何在使用Bootstrap的情况下创建这个侧边栏吗？还是不考虑是否使用Bootstrap，只是想知道如何制作它？这个侧边栏可以很容易地在没有Bootstrap的情况下制作。 - AskYous
@AskYous 需要进行引导，因为这是我们正在使用的系统 - 请参见我下面的答案。 - RussellHarrower
5个回答
63

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

我所做的是以下内容:

  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
我的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
有没有办法添加下拉菜单？ - Nanda
因为侧边栏宽度不允许单击其他元素，所以无法工作。 - Ivandez
不再正确，请查看这里：https://github.com/ivp-dev/react-bootstrap-sidebar-menu - Phyo Arkar Lwin
@Nanda 试试这个：https://react-bootstrap.github.io/components/accordion/ - Yumin Gui
4
截至2022年，有一种基于纯React-Bootstrap的组件称为react-bootstrap-sidebar-menu。这是目前最干净、非常可定制的解决方案。
链接：https://www.npmjs.com/package/react-bootstrap-sidebar-menu Github链接：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>
1
有没有一个页面可以看到使用这个库实现的菜单？在演示页面中，我看不到使用这个库的React代码。@phyo arkar Lwin - itpragmatik
1
演示页面就是使用它的页面。不要害怕深入源代码：https://github.com/ivp-dev/react-bootstrap-sidebar-menu/blob/main/www/src/pages/app.tsx - Phyo Arkar Lwin
4
图书馆出现了问题且缺乏文档说明。不要像我一样浪费时间在上面。请修复它或者换一个新的。 - NecipAllef
我现在没有代码，但是我们可以假设它适用于你的情况和其他一些情况，就这样吧。说实话，任何缺乏文档的库都不值得使用，因为它显示了所有者的不信任。如果你选择使用它，祝你好运@Vadim - NecipAllef
@NecipAllef 很难找到覆盖所有情况的库。但是该库有文档（https://ivp-dev.github.io/react-bootstrap-sidebar-menu）和带源代码的工作示例。如果您有任何问题，请随时提问。但我认为您需要一些易于使用且无需任何努力的东西，在这种情况下祝你好运。 - Vadim
显示剩余6条评论
1
当然，你需要自己制作导航栏，上面的示例非常有效，但是cdbreact可以大大加快这个过程。只需使用npm I cdbreact或yarn add cdbreact添加cdbreact，然后使用CDBSidebar、CDBSidebarContent、CDBSidebarHeader等导入cdbreact，您就不需要在react应用程序中安装bootstrap了。cdbreact还带有图标等许多功能。
import React from 'react' import {CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem} from 'cdbreact'; import {NavLink, Link} from 'react-router-dom'; import {} from 'react-router-dom';
const Sidebar=()=>{
    return (
        <div style={{display:'flex', height:'100%', overflow:'scroll initial'}}>
            <CDBSidebar textColer="#fff" backgroundColor="rgb(37, 90, 122)">
                <CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
                    <Link to="/dashboard">Dashboard</Link>
                </CDBSidebarHeader>
                <CDBSidebarContent className="sidebar-content">
                    <CDBSidebarMenu>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                            <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                            <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                            <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                        <NavLink exact to="/dashboard" activeClassName="activeClicked">
                             <CDBSidebarMenuItem icon="columns">
                                Transfer
                            </CDBSidebarMenuItem>
                        </NavLink>
                    </CDBSidebarMenu>
                </CDBSidebarContent>
                <CDBSidebarFooter style={{textAlign:'center'}}>
                    <div className="sidebar-btn-wrapper" style={{ padding :'20px 5px' }}>
                        sidebar footer
                    </div>
                </CDBSidebarFooter>
            </CDBSidebar>
        </div>
    )
}

export default Sidebar;

您也可以按照这里的指南进行操作https://dev.to/devwares/how-to-create-a-responsive-sidebar-in-react-using-bootstrap-and-contrast-5gi2，点击此链接查看。

就我而言，尽管已经安装了 cdbreact，但我仍然无法使用它。看起来问题并不在于软件包本身。 - siya
你能分享一下你的挑战是什么吗？错误信息或其他什么东西。 - Badmous
Github上的最后更新时间为5个月前。 这个项目还在维护吗？ 我尝试安装，但是在安装过程中出现了错误。 - BertC
你遇到了什么错误？你可以使用mdbreact或cdbreact。它们基本相同。请问您遇到的错误是什么？ - Badmous
1
现在可以使用一个名为react-bootstrap-drawer的库，它提供了一个侧边栏/抽屉，直接从react-bootstrap文档中获取。奇怪的是，这不是该库本身提供的组件，因此必须使用第三方库。
import 'react-bootstrap-drawer/lib/style.css';
import React, { useState } from 'react';
import {
    Col,
    Collapse,
    Container,
    Row,
} from 'react-bootstrap';
import { Drawer, } from 'react-bootstrap-drawer';

const ApplicationDrawer = (props) => {
    const [open, setOpen] = useState(false);

    const handleToggle = () => setOpen(!open);

    return (
        <Drawer { ...props }>
            <Drawer.Toggle onClick={ handleToggle } />

            <Collapse in={ open }>
                <Drawer.Overflow>
                    <Drawer.ToC>
                        <Drawer.Header href="/">Application</Drawer.Header>

                        <Drawer.Nav>
                            <Drawer.Item href="/settings">Settings</Drawer.Item>
                        </Drawer.Nav>
                    </Drawer.ToC>
                </Drawer.Overflow>
            </Collapse>
        </Drawer>
    );
};

const Application = (props) => {
    return (
        <Container fluid>
            <Row className="flex-xl-nowrap">
                <Col as={ ApplicationDrawer } xs={ 12 } md={ 3 } lg={ 2 } />
                <Col xs={ 12 } md={ 9 } lg={ 10 }>{ props.children }</Col>
            </Row>
        </Container>
    );
};

请见：https://github.com/SimpleSigner/react-bootstrap-drawer

1

可以使用纯React-Bootstrap来完成。诀窍是使用折叠功能实现下拉菜单和使用组合

侧边栏

const SideBar = ({children}) => {
  return <Nav className={'flex-column'}>{children}</Nav>
}

SideBar.Dropdown = SideBarDropdown
SideBar.Item = SideBarItem

export default SideBar

侧边栏下拉菜单（注意折叠）

const SideBarDropdown = ({title, children}) => {
  const [open, setOpen] = useState(false);
  return (
    <Container fluid className={'p-0 m-0'}>
      <Nav.Item onClick={() => setOpen(!open)} className={'p-0 m-0'}>
          {/*Your Dropdown Text*/}
      </Nav.Item>
      <Collapse in={open}>
        <div> {children} </div>
      </Collapse>
    </Container>
  )
}
export default SideBarDropdown

边栏项

const SideBarItem = ({title, value, onClick}) => {
  return (
    <Container fluid className={'p-0 m-0'}>
      <Nav.Item onClick={onClick} className={'p-0 m-0'}>
          {/*Your Dropdown Text*/}
      </Nav.Item>
    </Container>
  )
}

export default SideBarItem

示例用例

const ToolsSidebar = ({ setCurrentTool, currentTool }: SideNavProps) => {
  return (
    <SideBar>
      <SideBar.Dropdown title={'Datasets'}>
        <SideBar.Item title={'Files'} value={'some_files'} />
        <SideBar.Item title={'Documents'} value={'something_else'} />
      </SideBar.Dropdown>
      <SideBar.Dropdown title={'Title1'}>
        <SideBar.Item title={'Creator'} value={'some_writer'} />
        <SideBar.Item title={'Components List'} value={'some_list'} />
      </SideBar.Dropdown>
    </SideBar>
  )
}
export default ToolsSidebar
嗨，你能解释一下SideBar.Dropdown = SideBarDropdown和SideBar.Item = SideBarItem背后的原因吗？ - Nashit Shayan
嗨，你能解释一下SideBar.Dropdown = SideBarDropdown和SideBar.Item = SideBarItem背后的原因吗？ - undefined
1
这只是为了使用点表示法。 - gunslingor
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接