Toasts

使用 Toast 向访客推送通知，Toast 是一种轻量级且易于自定义的警报消息。

Toast 是一种轻量级通知，旨在模仿移动和桌面操作系统普及的推送通知。它们使用 flexbox 构建，因此易于对齐和定位。

示例

基本

为了鼓励可扩展且可预测的 Toast，我们建议使用标题和正文。Toast 标题使用 display: flex，借助我们的边距和 flexbox 实用工具，可以轻松对齐内容。

Toast 非常灵活，所需的标记很少。至少，我们需要一个元素来包含您的“Toast”内容，并强烈建议使用一个关闭按钮。

结果

加载中...

实时编辑器

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;

堆叠

当您有多个 Toast 时，我们默认以可读的方式垂直堆叠它们。

结果

加载中...

实时编辑器

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 来放置 Toast。右上角通常用于通知，顶部中间也是如此。

结果

加载中...

实时编辑器

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;

自动隐藏

Toast 也可以使用 autohide 属性在 X 毫秒后自动隐藏，使用 delay 属性指定延迟。要打开 Toast，请手动更改 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;

上下文变体

添加以下任何修饰符类以更改 Toast 的外观。

结果

加载中...

实时编辑器

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