Предупреждения

Компонент UIkit, предназначенный для отображения сообщений вида "успешно", "предупреждение" или сообщений об ошибках.

Как использовать компонент Alert в UIkit 3

Для активации компонента просто добавитье атрибут uk-alert к нужному элементу:

<div uk-alert></div>
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • <div uk-alert>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

Кнопка "Закрыть" для компонента

Для создания закрывающей кнопки добавьте элемент <button> или <a> с классом .uk-alert-close. Разместите его внутри контейнера. Затем добавьте иконку с помощью атрибута uk-close из компонента Close component.

<div uk-alert>
    <a class="uk-alert-close" uk-close></a>
</div>

  • Notice

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • <div uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <h3>Notice</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

Модификаторы стиля

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

Класс Описание
.uk-alert-primary Придать сообщению стандартный стиль.
.uk-alert-success Сообщение успешно выполненной операции.
.uk-alert-warning Сообщение текста предупреждения.
.uk-alert-danger Сообщение текста ошибки.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-warning" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

Опции компонента

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

Параметр Значение По умолчанию Описание
animation Boolean, String true Анимация Fade out из компонента Анимация.
duration Number 150 Задержка анимации в миллисекундах.
sel-close CSS selector .uk-alert-close Кнопка-закрывашка.

Параметр animation можно не указывать в случае, если он является единственным.

<span uk-toggle=".my-class"></span>

JavaScript

Узнать больше о JavaScript компонентах UIkit.

Инициализация

UIkit.alert(element, options);

События

Следующие события будут инициированы для элементов этого компонента:

Название Описание
beforehide Может отменить скрытие элемента и вернуть false.
hide Отрабатывает после скрытия элемента.

Методы

Для компонента доступны следующие методы:

Close

UIkit.alert(element).close();

Закрывает и удаляет компонент Alert.