Erstellen Sie eine Seitenleiste aus React-Bootstrap
Lesezeit: 6 Minuten
RussellHarrower
Ich versuche, eine Bootstrap-Seitenleiste wie dieses Bild hier zu erstellen.
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
RussellHarrower
Ok, also für Leute, die eine Seitenleiste machen wollen, ist die Nachricht leider, dass Sie alles selbst machen müssen.
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.
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
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:
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’;
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