Уведомления

alert
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно создать уведомления.

Примеры

Длина текста уведомления может быть любой.

Отлично!! Вы успешно увидели это важное сообщение.
Берегись! Это предупреждение требует вашего внимания.
Опасность! Это предупреждение на которое лучше обратить внимание.
Щелк! Измените данные и отправьте заново. 

<div class="relative p-1 border-1 border-transparent radius-1/3 bg-success color-on-surface-inverse border-success m-bottom-1">
    <strong>Отлично!!</strong> Вы успешно увидели это важное сообщение.
</div>
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-primary-container color-on-surface border-info m-bottom-1">
    <strong>Берегись!</strong> Это предупреждение требует вашего внимания.
</div>
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-warning color-on-surface-inverse border-warning m-bottom-1">
    <strong>Опасность!</strong> Это предупреждение на которое лучше обратить внимание.
</div>
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-danger color-on-surface-inverse border-danger">
    <strong>Щелк!</strong> Измените данные и отправьте заново.
</div>

Цвет ссылок

Отлично! Вы успешно увидели это важное сообщение.
Берегись! Это предупреждение требует вашего внимания.
Опасность! Это предупреждение на которое лучше обратить внимание.
Щелк! Измените данные и отправьте заново. 
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-success color-on-surface-inverse border-success m-bottom-1">
    <strong>Отлично!</strong> Вы успешно увидели <a href="#" class="decoration-black color-on-surface weight-5">это важное сообщение</a>.
</div>
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-primary-container color-on-surface border-info m-bottom-1">
    <strong>Берегись!</strong> Это <a href="#" class="decoration-black color-on-surface weight-5">предупреждение требует вашего внимания</a>.
</div>
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-warning color-on-surface-inverse border-warning m-bottom-1">
    <strong>Опасность!</strong> Это предупреждение на которое <a href="#" class="decoration-black color-on-surface weight-5">лучше обратить внимание</a>.
</div>
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-danger color-on-surface-inverse border-danger">
    <strong>Щелк!</strong> <a href="#" class="decoration-black color-on-surface weight-5">Измените данные и отправьте заново</a>.
</div>

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

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

Отлично!

Все, да, вы успешно прочитали это важное сообщение. Это пример текста, который будет работать немного дольше, чтобы вы могли видеть, как интервал между оповещением работает с таким типом контента.

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

<div class="relative p-1 border-1 border-transparent radius-1/3 bg-success color-on-surface-inverse border-success">
    <h4 class="m-top-0">Отлично!</h4>
    <p>Все, да, вы успешно прочитали это важное сообщение. Это пример текста, который будет работать немного дольше, чтобы вы могли видеть, как интервал между оповещением работает с таким типом контента.</p>
    <p class="m-bottom-0">Всякий раз, когда вам необходимо быть уверенными, обязательно используйте утилиты margin, чтобы было красиво и аккуратно.</p>
</div>

Закрытие

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

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

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

Внимание! Вы должны зарегистрироваться. 
<div class="relative p-1 border-1 border-transparent radius-1/3 bg-warning color-warning border-warning fade show">
    <button type="button" class="sf-close text-2"></button>
    <strong>Внимание!</strong> Вы должны зарегистрироваться.
</div>

Адаптивность

Для установки адаптивности уведомлений, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

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

Изменить статью