2. SIMAI Framework - Универсальная веб-платформа для создания интерфейса информационных систем
  3. UI
  4. Компоненты

Уведомления

Выводят контекстные сообщения для типовых действий пользователя.

Примеры

Длина текста уведомления может быть любой. Используйте один из четырех обязательных контекстных классов (например, .alert-success). Для закрытия используйте alerts jQuery plugin.

<div class="alert alert-success" role="alert">
  <strong>Отлично!</strong> Вы успешно увидели это важное сообщение.
</div>
<div class="alert alert-info" role="alert">
  <strong>Берегись!</strong> Это предупреждение требует вашего внимания, но это не очень важно.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Опасность!</strong>Лучше взгляните на себя, вы выглядите не очень хорошо.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Щелк!</strong> Измените данные и отправьте заново.
</div>

Передача значения ассистивным технологиям

Использование цвета для добавления значения обеспечивает только визуальную индикацию, которая не будет передаваться пользователям ассистивных технологий - таких как screen readers (программы для чтения экрана). Убедитесь, что информация, выделенная цветом, либо очевидна из самого содержания (например, видимый текст), либо включается с помощью альтернативных средств, таких как дополнительный текст, скрытый классом .sr-only.

Используйте служебный класс .alert-link, чтобы быстро предоставить соответствующие цветные ссылки в любом уведомлении.

<div class="alert alert-success" role="alert">
  <strong>Отлично!</strong> Вы успешно увидели <a href="#" class="alert-link">это важное сообщение</a>.
</div>
<div class="alert alert-info" role="alert">
  <strong>Берегись!</strong> Это <a href="#" class="alert-link">предупреждение требует вашего внимания</a>, но это не очень важно.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Опасность!</strong> Лучше взгляните на себя, вы <a href="#" class="alert-link">выглядите не очень хорошо</a>.
</div>
<div class="alert alert-danger" role="alert">
  <strong>Щелк!</strong> <a href="#" class="alert-link">Измените данные </a> и отправьте заново.
</div>

Дополнительный контент

Уведомления также могут содержать дополнительные HTML-элементы, такие как заголовки и абзацы.

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Отлично!</h4>
  <p>Все, да, вы успешно прочитали это важное сообщение. Это пример текста, который будет работать немного дольше, чтобы вы могли видеть, как интервал между оповещением работает с таким типом контента.</p>
  <p class="mb-0">Всякий раз, когда вам необходимо быть уверенными, обязательно используйте утилиты margin, чтобы было красиво и аккуратно.</p>
</div>

Закрытие

Используя плагин уведомлений JavaScript можно закрывать любые уведомления. Вот как:

  • Убедитесь, что вы загрузили плагин уведомления или скомпилированный Bootstrap JavaScript.
  • Добавьте кнопку закрытия и класс .alert-dismissible, который добавляет дополнительный отступ справа и positions the .close button.
  • На кнопку закрытия добавьте атрибут data-dismiss="alert", который запускает функционал JavaScript. Обязательно используйте элемент <button> для правильного поведения на всех устройствах.
  • Чтобы анимировать уведомления при их закрытии, добавьте классы .fade и .show.

Вы можете увидеть это в действии на демо:

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  <strong>Святая корова!</strong> Вы должны зарегистрироваться в некоторых из этих полей ниже.
</div>

JavaScript поведение

Триггеры

Включите закрытие уведомлений с помощью JavaScript:

$(".alert").alert()

Или с помощью атрибутов data на кнопку в предупреждение, как показано ниже:

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

Обратите внимание, что закрытие уведомления удаляет его из DOM.

Методы

Метод Описание
$().alert() Создает оповещение, ожидая сигнал события клика на элементах потомков, у которых есть data-dismiss="alert" атрибут. (Необязательно при использовании авто-инициализации данных API.)
$().alert('close') Закрывает уведомление, удалив его из DOM. Если классы .fade и .show присутствуют на элементе, уведомление исчезнет перед его удалением. 
$(".alert").alert('close')

События

Плагин уведомлений Bootstrap предоставляет несколько событий для подключения в функционал уведомления.

Событие Описание
close.bs.alert Это событие запускается сразу же, когда вызывается метод экземпляра close.
closed.bs.alert Это событие запускается, когда уведомление было закрыто (будет ждать CSS-переходы для завершения). 
$('#myAlert').on('closed.bs.alert', function () {
  // напишите
})