トースト

軽量でカスタマイズしやすいアラートメッセージであるトーストを使用して、訪問者にプッシュ通知を送信します。

トーストは、モバイルおよびデスクトップオペレーティングシステムで普及しているプッシュ通知を模倣するように設計された軽量の通知です。フレックスボックスで構築されているため、配置と位置調整が簡単です。

例

基本

拡張性と予測可能性の高いトーストを推奨するために、ヘッダーと本文を推奨します。トーストヘッダーは `display: flex` を使用しているため、マージンとフレックスボックスユーティリティのおかげでコンテンツを簡単に配置できます。

トーストは必要に応じて柔軟性があり、必要なマークアップはほとんどありません。「トーストされた」コンテンツを格納するための単一の要素を最低限必要とし、閉じるボタンを強くお勧めします。

結果

読み込み中...

ライブエディター

import Toast from 'react-bootstrap/Toast'; function BasicExample() { return ( <Toast> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small>11 mins ago</small> </Toast.Header> <Toast.Body>Hello, world! This is a toast message.</Toast.Body> </Toast> ); } export default BasicExample;

import Toast from 'react-bootstrap/Toast';

function BasicExample() {
  return (
    <Toast>
      <Toast.Header>
        <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
        <strong className="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </Toast.Header>
      <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
    </Toast>
  );
}

export default BasicExample;

閉じることができる

結果

読み込み中...

ライブエディター

import React, { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; import Toast from 'react-bootstrap/Toast'; function DismissibleExample() { const [showA, setShowA] = useState(true); const [showB, setShowB] = useState(true); const toggleShowA = () => setShowA(!showA); const toggleShowB = () => setShowB(!showB); return ( <Row> <Col md={6} className="mb-2"> <Button onClick={toggleShowA} className="mb-2"> Toggle Toast <strong>with</strong> Animation </Button> <Toast show={showA} onClose={toggleShowA}> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small>11 mins ago</small> </Toast.Header> <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body> </Toast> </Col> <Col md={6} className="mb-2"> <Button onClick={toggleShowB} className="mb-2"> Toggle Toast <strong>without</strong> Animation </Button> <Toast onClose={toggleShowB} show={showB} animation={false}> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small>11 mins ago</small> </Toast.Header> <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body> </Toast> </Col> </Row> ); } export default DismissibleExample;

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Toast from 'react-bootstrap/Toast';

function DismissibleExample() {
  const [showA, setShowA] = useState(true);
  const [showB, setShowB] = useState(true);

  const toggleShowA = () => setShowA(!showA);
  const toggleShowB = () => setShowB(!showB);

  return (
    <Row>
      <Col md={6} className="mb-2">
        <Button onClick={toggleShowA} className="mb-2">
          Toggle Toast <strong>with</strong> Animation
        </Button>
        <Toast show={showA} onClose={toggleShowA}>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
          </Toast.Header>
          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
        </Toast>
      </Col>
      <Col md={6} className="mb-2">
        <Button onClick={toggleShowB} className="mb-2">
          Toggle Toast <strong>without</strong> Animation
        </Button>
        <Toast onClose={toggleShowB} show={showB} animation={false}>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
          </Toast.Header>
          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
        </Toast>
      </Col>
    </Row>
  );
}

export default DismissibleExample;

スタッキング

複数のトーストがある場合、デフォルトでは読みやすいように垂直にスタックされます。

結果

読み込み中...

ライブエディター

import Toast from 'react-bootstrap/Toast'; import ToastContainer from 'react-bootstrap/ToastContainer'; function StackingExample() { return ( <ToastContainer className="position-static"> <Toast> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small className="text-muted">just now</small> </Toast.Header> <Toast.Body>See? Just like this.</Toast.Body> </Toast> <Toast> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small className="text-muted">2 seconds ago</small> </Toast.Header> <Toast.Body>Heads up, toasts will stack automatically</Toast.Body> </Toast> </ToastContainer> ); } export default StackingExample;

import Toast from 'react-bootstrap/Toast';
import ToastContainer from 'react-bootstrap/ToastContainer';

function StackingExample() {
  return (
    <ToastContainer className="position-static">
      <Toast>
        <Toast.Header>
          <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
          <strong className="me-auto">Bootstrap</strong>
          <small className="text-muted">just now</small>
        </Toast.Header>
        <Toast.Body>See? Just like this.</Toast.Body>
      </Toast>
      <Toast>
        <Toast.Header>
          <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" />
          <strong className="me-auto">Bootstrap</strong>
          <small className="text-muted">2 seconds ago</small>
        </Toast.Header>
        <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
      </Toast>
    </ToastContainer>
  );
}

export default StackingExample;

配置

ToastContainer に position を設定してトーストを配置します。右上が通知によく使用されるのと同じように、中央上部もよく使用されます。

結果

読み込み中...

ライブエディター

import { useState } from 'react'; import Form from 'react-bootstrap/Form'; import Toast from 'react-bootstrap/Toast'; import ToastContainer from 'react-bootstrap/ToastContainer'; function PlacementExample() { const [position, setPosition] = useState('top-start'); return ( <> <div className="mb-3"> <label htmlFor="selectToastPlacement">Toast position</label> <Form.Select id="selectToastPlacement" className="mt-2" onChange={(e) => setPosition(e.currentTarget.value)} > {[ 'top-start', 'top-center', 'top-end', 'middle-start', 'middle-center', 'middle-end', 'bottom-start', 'bottom-center', 'bottom-end', ].map((p) => ( <option key={p} value={p}> {p} </option> ))} </Form.Select> </div> <div aria-live="polite" aria-atomic="true" className="bg-dark position-relative" style={{ minHeight: '240px' }} > <ToastContainer className="p-3" position={position} style={{ zIndex: 1 }} > <Toast> <Toast.Header closeButton={false}> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small>11 mins ago</small> </Toast.Header> <Toast.Body>Hello, world! This is a toast message.</Toast.Body> </Toast> </ToastContainer> </div> </> ); } export default PlacementExample;

import { useState } from 'react';
import Form from 'react-bootstrap/Form';
import Toast from 'react-bootstrap/Toast';
import ToastContainer from 'react-bootstrap/ToastContainer';

function PlacementExample() {
  const [position, setPosition] = useState('top-start');

  return (
    <>
      <div className="mb-3">
        <label htmlFor="selectToastPlacement">Toast position</label>
        <Form.Select
          id="selectToastPlacement"
          className="mt-2"
          onChange={(e) => setPosition(e.currentTarget.value)}
        >
          {[
            'top-start',
            'top-center',
            'top-end',
            'middle-start',
            'middle-center',
            'middle-end',
            'bottom-start',
            'bottom-center',
            'bottom-end',
          ].map((p) => (
            <option key={p} value={p}>
              {p}
            </option>
          ))}
        </Form.Select>
      </div>

      <div
        aria-live="polite"
        aria-atomic="true"
        className="bg-dark position-relative"
        style={{ minHeight: '240px' }}
      >
        <ToastContainer
          className="p-3"
          position={position}
          style={{ zIndex: 1 }}
        >
          <Toast>
            <Toast.Header closeButton={false}>
              <img
                src="holder.js/20x20?text=%20"
                className="rounded me-2"
                alt=""
              />
              <strong className="me-auto">Bootstrap</strong>
              <small>11 mins ago</small>
            </Toast.Header>
            <Toast.Body>Hello, world! This is a toast message.</Toast.Body>
          </Toast>
        </ToastContainer>
      </div>
    </>
  );
}

export default PlacementExample;

より多くの通知を生成するシステムの場合は、簡単にスタックできるようにラッピング要素を使用することを検討してください。

結果

読み込み中...

ライブエディター

import Toast from 'react-bootstrap/Toast'; import ToastContainer from 'react-bootstrap/ToastContainer'; function PlacementMultiExample() { return ( <div aria-live="polite" aria-atomic="true" className="bg-dark position-relative" style={{ minHeight: '240px' }} > <ToastContainer position="top-end" className="p-3" style={{ zIndex: 1 }}> <Toast> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small className="text-muted">just now</small> </Toast.Header> <Toast.Body>See? Just like this.</Toast.Body> </Toast> <Toast> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small className="text-muted">2 seconds ago</small> </Toast.Header> <Toast.Body>Heads up, toasts will stack automatically</Toast.Body> </Toast> </ToastContainer> </div> ); } export default PlacementMultiExample;

import Toast from 'react-bootstrap/Toast';
import ToastContainer from 'react-bootstrap/ToastContainer';

function PlacementMultiExample() {
  return (
    <div
      aria-live="polite"
      aria-atomic="true"
      className="bg-dark position-relative"
      style={{ minHeight: '240px' }}
    >
      <ToastContainer position="top-end" className="p-3" style={{ zIndex: 1 }}>
        <Toast>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small className="text-muted">just now</small>
          </Toast.Header>
          <Toast.Body>See? Just like this.</Toast.Body>
        </Toast>
        <Toast>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small className="text-muted">2 seconds ago</small>
          </Toast.Header>
          <Toast.Body>Heads up, toasts will stack automatically</Toast.Body>
        </Toast>
      </ToastContainer>
    </div>
  );
}

export default PlacementMultiExample;

自動非表示

トーストは、`autohide` プロパティと `delay` プロパティを使用して遅延を指定することで、Xミリ秒後に自動的に非表示にすることもできます。トーストを開くには、`show` プロパティを手動で変更します。

結果

読み込み中...

ライブエディター

import React, { useState } from 'react'; import Button from 'react-bootstrap/Button'; import Col from 'react-bootstrap/Col'; import Row from 'react-bootstrap/Row'; import Toast from 'react-bootstrap/Toast'; function AutohideExample() { const [show, setShow] = useState(false); return ( <Row> <Col xs={6}> <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide> <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small>11 mins ago</small> </Toast.Header> <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body> </Toast> </Col> <Col xs={6}> <Button onClick={() => setShow(true)}>Show Toast</Button> </Col> </Row> ); } export default AutohideExample;

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Toast from 'react-bootstrap/Toast';

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

  return (
    <Row>
      <Col xs={6}>
        <Toast onClose={() => setShow(false)} show={show} delay={3000} autohide>
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
          </Toast.Header>
          <Toast.Body>Woohoo, you're reading this text in a Toast!</Toast.Body>
        </Toast>
      </Col>
      <Col xs={6}>
        <Button onClick={() => setShow(true)}>Show Toast</Button>
      </Col>
    </Row>
  );
}

export default AutohideExample;

コンテキストバリエーション

以下の修飾子クラスを追加して、トーストの外観を変更します。

結果

読み込み中...

ライブエディター

import Toast from 'react-bootstrap/Toast'; function ContextualExample() { return ( <> {[ 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark', ].map((variant, idx) => ( <Toast className="d-inline-block m-1" bg={variant.toLowerCase()} key={idx} > <Toast.Header> <img src="holder.js/20x20?text=%20" className="rounded me-2" alt="" /> <strong className="me-auto">Bootstrap</strong> <small>11 mins ago</small> </Toast.Header> <Toast.Body className={variant === 'Dark' && 'text-white'}> Hello, world! This is a toast message. </Toast.Body> </Toast> ))} </> ); } export default ContextualExample;

import Toast from 'react-bootstrap/Toast';

function ContextualExample() {
  return (
    <>
      {[
        'Primary',
        'Secondary',
        'Success',
        'Danger',
        'Warning',
        'Info',
        'Light',
        'Dark',
      ].map((variant, idx) => (
        <Toast
          className="d-inline-block m-1"
          bg={variant.toLowerCase()}
          key={idx}
        >
          <Toast.Header>
            <img
              src="holder.js/20x20?text=%20"
              className="rounded me-2"
              alt=""
            />
            <strong className="me-auto">Bootstrap</strong>
            <small>11 mins ago</small>
          </Toast.Header>
          <Toast.Body className={variant === 'Dark' && 'text-white'}>
            Hello, world! This is a toast message.
          </Toast.Body>
        </Toast>
      ))}
    </>
  );
}

export default ContextualExample;

API

Toast

ToastHeader

ToastBody

ToastContainer