сделать боковую панель из реакции- bootstrap - PullRequest
Новая
       50

сделать боковую панель из реакции- bootstrap

2 голосов
/ 02 марта 2020

Я пытаюсь создать боковую панель bootstrap, как показано здесь. sidebar

Я просмотрел весь код на React- bootstrap и в Твиттере bootstrap, и я пока не нашел, как это сделать. в основном, если они просматривают на рабочем столе, я хочу, чтобы боковая панель была видимой, если нет, то она будет скрыта.

боковая панель должна оставаться неподвижной, пока содержимое страницы прокручивается вверх и вниз.

Любая помощь здесь будет высоко ценится

1 Ответ

3 голосов
/ 02 марта 2020

Хорошо, так что для людей, которые хотят сделать боковую панель, к сожалению, новость в том, что ты должен сделать все сам.

Я сделал следующее:

  1. Откройте вверх https://blackrockdigital.github.io/startbootstrap-simple-sidebar/#
  2. Создать боковую панель. 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
Моя панель инструментов. 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
...