色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

從react-bootstrap制作側(cè)邊欄

CSS

我正在嘗試創(chuàng)建一個(gè)像這樣的圖片自舉側(cè)邊欄。

sidebar

我已經(jīng)查看了react-bootstrap和Twitter Bootstrap上的所有代碼，但我還沒有找到如何編寫代碼?；旧希绻麄?cè)谧烂嫔喜榭?，我希望?cè)邊欄是可見的，否則隱藏。

當(dāng)頁面內(nèi)容上下滾動(dòng)時(shí)，側(cè)邊欄應(yīng)該保持不動(dòng)。

好吧，對(duì)于那些想制作邊欄的人來說，不幸的是，你必須自己制作。

我所做的如下。

請(qǐng)參見https://github . com/start bootstrap/start bootstrap-simple-sidebar上的示例 在你的應(yīng)用程序中創(chuàng)建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

My Dashboard.css包含以下內(nèi)容。

.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%;
    }

然后是最后一步 在您想要顯示的文件中，執(zhí)行以下操作

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

截至2022年，有一個(gè)名為react-boostrap-sidebar-menu的純r(jià)eact-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>

現(xiàn)在可以使用react-bootstrap-drawer庫，它提供了一個(gè)sidenav / 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

當(dāng)然，你必須自己制作導(dǎo)航條，上面的例子非常有效，但是cdbreact加快了這個(gè)過程。只需添加cdbreact，使用

npm I cdbreact

或者

紗線添加cdbreact

然后導(dǎo)入CDBSidebar、CDBSidebarContent、CDBSidebarHeader等。有了cdbreact，你就不需要為在react應(yīng)用中安裝bootsrap而煩惱了。 cdbreact還帶有圖標(biāo)，等等。

從“react”導(dǎo)入React 導(dǎo)入{CDBSidebar， CDBSidebarContent， CDBSidebarHeader， CDBSidebarFooter，CDBSidebarMenu， “cdbreact”中的CDBSidebarMenuItem }； 從“react-router-dom”導(dǎo)入{NavLink，Link }； 從“react-router-dom”導(dǎo)入{ }；

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;

你也可以點(diǎn)擊這里的指南https://dev . to/devware/how-to-create-a-responsive-sidebar-in-react-using-bootstrap-and-contrast-5gi 2點(diǎn)擊此鏈接查看

我們可以使用純反應(yīng)自舉來實(shí)現(xiàn)。訣竅是對(duì)下拉列表使用折疊，并使用合成

補(bǔ)充報(bào)道

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

SideBar.Dropdown = SideBarDropdown
SideBar.Item = SideBarItem

export default SideBar

SideBarDropdown(注意折疊)

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

SideBarItem

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