侧边栏

在您的项目中构建隐藏的侧边栏，用于导航、购物车等。

示例

侧边栏包括对带有关闭按钮的标题和可选主体类的支持，以提供一些初始填充。我们建议您尽可能包含带有关闭操作的侧边栏标题，或提供明确的关闭操作。

基本示例

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Offcanvas from 'react-bootstrap/Offcanvas'; function Example() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow}> Launch </Button> <Offcanvas show={show} onHide={handleClose}> <Offcanvas.Header closeButton> <Offcanvas.Title>Offcanvas</Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </Offcanvas.Body> </Offcanvas> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch
      </Button>

      <Offcanvas show={show} onHide={handleClose}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default Example;

响应式

响应式侧边栏类从指定断点开始隐藏视窗外的内容。在该断点以上，其中的内容将按预期行为。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Alert from 'react-bootstrap/Alert'; import Button from 'react-bootstrap/Button'; import Offcanvas from 'react-bootstrap/Offcanvas'; function ResponsiveExample() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" className="d-lg-none" onClick={handleShow}> Launch </Button> <Alert variant="info" className="d-none d-lg-block"> Resize your browser to show the responsive offcanvas toggle. </Alert> <Offcanvas show={show} onHide={handleClose} responsive="lg"> <Offcanvas.Header closeButton> <Offcanvas.Title>Responsive offcanvas</Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> <p className="mb-0"> This is content within an <code>.offcanvas-lg</code>. </p> </Offcanvas.Body> </Offcanvas> </> ); } export default ResponsiveExample;

import { useState } from 'react';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

function ResponsiveExample() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" className="d-lg-none" onClick={handleShow}>
        Launch
      </Button>

      <Alert variant="info" className="d-none d-lg-block">
        Resize your browser to show the responsive offcanvas toggle.
      </Alert>

      <Offcanvas show={show} onHide={handleClose} responsive="lg">
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Responsive offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          <p className="mb-0">
            This is content within an <code>.offcanvas-lg</code>.
          </p>
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default ResponsiveExample;

位置

侧边栏支持几种不同的位置

• start 将侧边栏放置在视窗的左侧
• end 将侧边栏放置在视窗的右侧
• top 将侧边栏放置在视窗的顶部
• bottom 将侧边栏放置在视窗的底部

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Offcanvas from 'react-bootstrap/Offcanvas'; function OffCanvasExample({ name, ...props }) { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow} className="me-2"> {name} </Button> <Offcanvas show={show} onHide={handleClose} {...props}> <Offcanvas.Header closeButton> <Offcanvas.Title>Offcanvas</Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </Offcanvas.Body> </Offcanvas> </> ); } function Example() { return ( <> {['start', 'end', 'top', 'bottom'].map((placement, idx) => ( <OffCanvasExample key={idx} placement={placement} name={placement} /> ))} </> ); } render(<Example />);

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

function OffCanvasExample({ name, ...props }) {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow} className="me-2">
        {name}
      </Button>
      <Offcanvas show={show} onHide={handleClose} {...props}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

function Example() {
  return (
    <>
      {['start', 'end', 'top', 'bottom'].map((placement, idx) => (
        <OffCanvasExample key={idx} placement={placement} name={placement} />
      ))}
    </>
  );
}

render(<Example />);

背景

当侧边栏及其背景可见时，<body> 元素的滚动将被禁用。使用 scroll 属性来切换 <body> 滚动，并使用 backdrop 属性来切换背景。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Offcanvas from 'react-bootstrap/Offcanvas'; const options = [ { name: 'Enable backdrop (default)', scroll: false, backdrop: true, }, { name: 'Disable backdrop', scroll: false, backdrop: false, }, { name: 'Enable body scrolling', scroll: true, backdrop: false, }, { name: 'Enable both scrolling & backdrop', scroll: true, backdrop: true, }, ]; function OffCanvasExample({ name, ...props }) { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const toggleShow = () => setShow((s) => !s); return ( <> <Button variant="primary" onClick={toggleShow} className="me-2"> {name} </Button> <Offcanvas show={show} onHide={handleClose} {...props}> <Offcanvas.Header closeButton> <Offcanvas.Title>Offcanvas</Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </Offcanvas.Body> </Offcanvas> </> ); } function Example() { return ( <> {options.map((props, idx) => ( <OffCanvasExample key={idx} {...props} /> ))} </> ); } render(<Example />);

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

const options = [
  {
    name: 'Enable backdrop (default)',
    scroll: false,
    backdrop: true,
  },
  {
    name: 'Disable backdrop',
    scroll: false,
    backdrop: false,
  },
  {
    name: 'Enable body scrolling',
    scroll: true,
    backdrop: false,
  },
  {
    name: 'Enable both scrolling & backdrop',
    scroll: true,
    backdrop: true,
  },
];

function OffCanvasExample({ name, ...props }) {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const toggleShow = () => setShow((s) => !s);

  return (
    <>
      <Button variant="primary" onClick={toggleShow} className="me-2">
        {name}
      </Button>
      <Offcanvas show={show} onHide={handleClose} {...props}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

function Example() {
  return (
    <>
      {options.map((props, idx) => (
        <OffCanvasExample key={idx} {...props} />
      ))}
    </>
  );
}

render(<Example />);

静态背景

当 backdrop 设置为 static 时，点击侧边栏外部不会关闭侧边栏。

结果

加载中...

实时编辑器

import { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Offcanvas from 'react-bootstrap/Offcanvas'; function Example() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow}> Toggle static offcanvas </Button> <Offcanvas show={show} onHide={handleClose} backdrop="static"> <Offcanvas.Header closeButton> <Offcanvas.Title>Offcanvas</Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> I will not close if you click outside of me. </Offcanvas.Body> </Offcanvas> </> ); } export default Example;

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Toggle static offcanvas
      </Button>

      <Offcanvas show={show} onHide={handleClose} backdrop="static">
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          I will not close if you click outside of me.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default Example;

API

侧边栏

侧边栏标题

侧边栏标题

侧边栏内容