オフキャンバス

ナビゲーションやショッピングカートなどのために、隠れたサイドバーをプロジェクトに組み込みます。

例

オフキャンバスには、閉じるボタン付きのヘッダーと、初期パディング用のオプションのボディクラスのサポートが含まれています。可能な限り、ディスミスアクション付きのオフキャンバスヘッダーを含めるか、明示的なディスミスアクションを提供することをお勧めします。

基本例

結果

読み込み中...

ライブエディター

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

オフキャンバス

オフキャンバスヘッダー

オフキャンバスタイトル

オフキャンバスボディ