Erstellen Sie eine Seitenleiste aus React-Bootstrap

Lesezeit: 6 Minuten

Benutzeravatar von RussellHarrower
RussellHarrower

Ich versuche, eine Bootstrap-Seitenleiste wie dieses Bild hier zu erstellen.

Seitenleiste

Ich habe mir den gesamten Code auf React-Bootstrap und Twitter Bootstrap angesehen und muss noch eine Anleitung zum Code dafür finden. Grundsätzlich möchte ich, dass die Seitenleiste sichtbar ist, wenn sie auf einem Desktop angezeigt werden, andernfalls ausgeblendet.

Die Seitenleiste sollte ruhig bleiben, während der Inhalt auf der Seite nach oben und unten scrollt.

  • Fragen Sie, wie Sie diese Seitenleiste erstellen, während Sie Bootstrap verwenden? Oder fragen Sie, wie man es macht, unabhängig davon, ob wir Bootstrap verwenden oder nicht? Die Seitenleiste kann einfach ohne Bootstrap erstellt werden.

    – AskYous

    2. März 2020 um 3:44 Uhr


  • @AskYous musste Bootstrap sein, da dies das System ist, das wir verwenden – siehe meine Antwort unten.

    – RussellHarrower

    2. März 2020 um 3:50 Uhr

Benutzeravatar von RussellHarrower
RussellHarrower

Ok, also für Leute, die eine Seitenleiste machen wollen, ist die Nachricht leider, dass Sie alles selbst machen müssen.

Was ich gemacht habe ist folgendes.

  1. Siehe das Beispiel unter https://github.com/StartBootstrap/startbootstrap-simple-sidebar
  2. Erstellen Sie irgendwo in Ihrer App 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. Meine Dashboard.css enthält Folgendes.
 .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%;
    }

Dann letzter Schritt In der Datei, in der es angezeigt werden soll, gehen Sie wie folgt vor

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

  • Gibt es eine Möglichkeit, Dropdown hinzuzufügen

    – Nanda

    4. August 2021 um 8:27 Uhr

  • Funktioniert nicht, da die Seitennavigationsbreite das Klicken auf andere Elemente nicht zulässt

    – Ivandez

    25. Oktober 2021 um 22:41 Uhr

  • Es ist nicht mehr wahr, überprüfen Sie hier: github.com/ivp-dev/react-bootstrap-sidebar-menu

    – Phyo Arkar Lwin

    15. August um 17:28 Uhr

Benutzeravatar von Phyo Arkar Lwin
Phyo Arkar Lwin

Ab 2022 gibt es eine reine React-Boostrap-basierte Komponente namens react-boostrap-sidebar-menu . Es ist die bisher sauberste Lösung und ziemlich anpassbar.

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>

  • Gibt es eine Seite, auf der ich ein Menü sehen kann, das mit dieser Bibliothek implementiert wurde? Auf der Demoseite kann ich den Reaktionscode, der diese Bibliothek verwendet, nicht sehen. @phyo arkar Lwin

    – itpragmatik

    9. August um 17:23 Uhr

  • Die Demoseite ist derjenige, der sie verwendet. Scheuen Sie sich nicht, in den Quellcode einzutauchen. : github.com/ivp-dev/react-bootstrap-sidebar-menu/blob/main/www/…

    – Phyo Arkar Lwin

    15. August um 17:27 Uhr


  • Die Bibliothek ist kaputt und es fehlt die Dokumentation. Verschwenden Sie keine Zeit wie ich

    – NecipAllef

    18. September um 14:30 Uhr

Man kann jetzt eine Bibliothek benutzen, react-bootstrap-drawerdie eine Seitennavigation / Schublade bietet, die direkt von der übernommen wurde react-bootstrap Dokumentation. Seltsamerweise ist dies keine Komponente, die von der Bibliothek selbst bereitgestellt wird, daher muss eine Bibliothek eines Drittanbieters verwendet werden:

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

Sehen: https://github.com/SimpleSigner/react-bootstrap-drawer

Natürlich müssen Sie die Navigationsleiste selbst erstellen, und die obigen Beispiele sind sehr gültig, aber cdbreact beschleunigt den Prozess viel schneller. fügen Sie einfach cdreact mit hinzu

npm ich cdreact

oder

Garn hinzufügen cdreact

und dann CDBSidebar, CDBSidebarContent, CDBSidebarHeader usw. mit cdbreact importieren, brauchen Sie sich nicht um die Installation von Bootsrap in Ihrer React-App zu kümmern. cdbreact enthält auch Symbole und vieles mehr.

import Reagieren von ‘react’ import {CDBSidebar, CDBSidebarContent, CDBSidebarHeader, CDBSidebarFooter, CDBSidebarMenu, CDBSidebarMenuItem} von ‘cdbreact’; importiere {NavLink, Link} aus ‘react-router-dom’; importiere {} aus ‘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;

Sie können der Anleitung auch hier folgen https://dev.to/devwares/how-to-create-a-responsive-sidebar-in-react-using-bootstrap-and-contrast-5gi2 Folgen Sie diesem Link, um zu sehen

1430010cookie-checkErstellen Sie eine Seitenleiste aus React-Bootstrap

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy