Сводки

Предоставьте контекстные сообщения обратной связи для типичных действий пользователя с помощью нескольких доступных и гибких сообщений об ошибках.

Примеры

Сводки доступны для текста любой длины, а также с необязательной кнопкой закрытия. Для правильного форматирования используйте один из восьми variant.

[
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((variant, idx) => (
  <Alert key={idx} variant={variant}>
    This is a {variant} alert—check it out!
  </Alert>
));

Ссылки

Для ссылок используйте компонент <Alert.Link> для предоставления ссылок соответствующего цвета в любой сводке.

[
  'primary',
  'secondary',
  'success',
  'danger',
  'warning',
  'info',
  'light',
  'dark',
].map((variant, idx) => (
  <Alert key={idx} variant={variant}>
    This is a {variant} alert with{' '}
    <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
    like.
  </Alert>
));

Дополнительное содержимое

Сводки могут содержать любое содержимое. Заголовки, абзацы, разделители, действуйте свободно.

<Alert variant="success">
  <Alert.Heading>Hey, nice to see you</Alert.Heading>
  <p>
    Aww yeah, you successfully read this important alert message. This example
    text is going to run a bit longer so that you can see how spacing within an
    alert works with this kind of content.
  </p>
  <hr />
  <p className="mb-0">
    Whenever you need to, be sure to use margin utilities to keep things nice
    and tidy.
  </p>
</Alert>

Закрытие

Добавьте dismissible свойство, чтобы добавить функциональную кнопку закрытия сводки.

function AlertDismissibleExample() {
  const [show, setShow] = useState(true);

  if (show) {
    return (
      <Alert variant="danger" onClose={() => setShow(false)} dismissible>
        <Alert.Heading>Oh snap! You got an error!</Alert.Heading>
        <p>
          Change this and that and try again. Duis mollis, est non commodo
          luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
          Cras mattis consectetur purus sit amet fermentum.
        </p>
      </Alert>
    );
  }
  return <Button onClick={() => setShow(true)}>Show Alert</Button>;
}

render(<AlertDismissibleExample />);

Вы также можете напрямую контролировать визуальное состояние, что очень удобно, если вы хотите создавать более сложные сводки.

function AlertDismissible() {
  const [show, setShow] = useState(true);

  return (
    <>
      <Alert show={show} variant="success">
        <Alert.Heading>How's it going?!</Alert.Heading>
        <p>
          Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget
          lacinia odio sem nec elit. Cras mattis consectetur purus sit amet
          fermentum.
        </p>
        <hr />
        <div className="d-flex justify-content-end">
          <Button onClick={() => setShow(false)} variant="outline-success">
            Close me y'all!
          </Button>
        </div>
      </Alert>

      {!show && <Button onClick={() => setShow(true)}>Show Alert</Button>}
    </>
  );
}

render(<AlertDismissible />);

API

Сводка

import Alert from 'react-bootstrap/Alert'

Имя	Тип	По умолчанию	Описание
closeLabel	строка	`'Close alert'`	Устанавливает текст для кнопки закрытия сводки.
dismissible	логическое значение		Отображает правильно расположенную кнопку закрытия, а также добавляет дополнительный горизонтальный отступ к сводке.
onClose	функция		управляет `show` Обработчик событий, вызываемый при закрытии сводки.
show	логическое значение	`true`	управляется: `onClose`, начальное свойство: `defaultShow` Управляет визуальным состоянием сводки.
transition	логическое значение \| elementType	`Fade`	Анимировать закрытие сводки. По умолчанию использует анимацию `<Fade>` или используйте `false` для отключения. Также можно предоставить пользовательскую анимацию `react-transition-group`.
variant	'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info' \| 'dark' \| 'light'		Визуальный вариант сводки
bsPrefix	строка	`'alert'`	Изменить имя базового класса CSS и префикс имен модификаторов подлежащего компонента. Это аварийный выход для работы с сильно настраиваемым bootstrap css.

Alert.Заголовок

import Alert from 'react-bootstrap/Alert'

Имя	Тип	По умолчанию	Описание
as	elementType	`<DivStyledAsH4>`	Вы можете использовать пользовательский тип элемента для этого компонента.
bsPrefix обязательно	строка	`'alert-heading'`	Изменить имя базового класса CSS и префикс имен модификаторов подлежащего компонента. Это аварийный выход для работы с сильно настраиваемым bootstrap css.

Alert.Ссылка

import Alert from 'react-bootstrap/Alert'

Имя	Тип	По умолчанию	Описание
as	elementType	`<SafeAnchor>`	Вы можете использовать пользовательский тип элемента для этого компонента.
bsPrefix обязательно	строка	`'alert-link'`	Изменить имя базового класса CSS и префикс имен модификаторов подлежащего компонента. Это аварийный выход для работы с сильно настраиваемым bootstrap css.

© 2014–present Stephen J. Collings, Matthew Honnibal, Pieter Vanderwerff
Licensed under the MIT License (MIT).
https://react-bootstrap.github.io/components/alerts/