Компонент Алерт Alert

Уведомления. Диалоговое окно. Отображение успешного или положительного сообщения с анимацией. Сообщения об ошибках и предупреждениях. Взаимодействие с пользователем. Модификаторы.

Уведомления на веб-странице некоторой информации с целью привлечения к ней внимания пользователя. Как установить уведомление с предупреждением и как отобразить сообщения об ошибках.

Использование, подключение

Чтобы применить компонент Алерт добавьте атрибут uk-alert к элементу блока.

<div uk-alert></div>
  • Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку. 
  • <div uk-alert>
    Великий Оксмокс предупреждал ее о злых запятых, диких знаках вопроса и коварных точках с запятой, но текст не дал сбить себя с толку.
</div>

Кнопка закрытия

Чтобы создать кнопку закрытия и включить ее функциональность, добавьте внутри блока с уведомлением класс .uk-alert-close к элементу <button> или <a>. Для того, чтобы применить кнопку закрытия из компонента Значок закрытия, добавьте атрибут uk-close.

Итак, добавляем к блоку с уведомлением кнопку закрытия: 

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

  • Уведомление

    Дхаммапада : "Наша жизнь — следствие наших мыслей; она рождается в нашем сердце, она творится нашею мыслью. Если человек говорит и действует с доброю мыслью — радость следует за ним как тень, никогда не покидающая."

  • <div uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <h3>Уведомление</h3>
    <p>Дхаммапада : "Наша жизнь — следствие наших мыслей; она рождается в нашем сердце, она творится нашею мыслью. Если человек говорит и действует с доброю мыслью — радость следует за ним как тень, никогда не покидающая."</p>
</div>

Модификаторы

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

Класс Описание
.uk-alert-primary Будет показано сообщение с заметным стилем.
.uk-alert-success Указывает на успешное или положительное сообщение.
.uk-alert-warning Отобразит содержимое в виде сообщения содержащее предупреждение.
.uk-alert-danger Обозначает важное сообщение или оповещение об ошибке.

  • Самое необходимое учение — это то, которое отучает от зла. - Антисфен.

    Глядя в прошлое - снимите шляпу, глядя в будущее - засучите рукава!

    Не стесняйтесь своих чувств и желаний – другой жизни для них не будет…

    Прощайте врагов ваших — это лучший способ вывести их из себя. - Оскар Уайльд.

  • <div class="uk-alert-primary" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Самое необходимое учение — это то, которое отучает от зла. - Антисфен.</p>
</div>
<div class="uk-alert-success" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Глядя в прошлое - снимите шляпу, глядя в будущее - засучите рукава!</p>
</div>
<div class="uk-alert-warning" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Не стесняйтесь своих чувств и желаний – другой жизни для них не будет…</p>
</div>
<div class="uk-alert-danger" uk-alert>
    <a class="uk-alert-close" uk-close></a>
    <p>Прощайте врагов ваших — это лучший способ вывести их из себя. -  Оскар Уайльд.</p>
</div>
Alert с анимацией
Пример №1
Панель Алерт с анимацией slide-bottom при закрытии.
Пример №2
Окно с уведомлением и анимацией scale-up, блок с измененной продолжительностью исчезновения.

  • Primary! Жизнь — не страдание и не наслаждение, а дело, которое мы обязаны делать и честно довести его до конца.

    Alert! Жизнь — это непрекращающееся рождение, и себя принимаешь таким, каким становишься.

  • <div class="uk-alert-primary" uk-alert="uk-animation-slide-bottom">
    <a href="#" class="uk-alert-close" uk-close></a>
    <p><strong>Primary!</strong> Жизнь — не страдание и не наслаждение, а дело, которое мы обязаны делать и честно довести его до конца.</p>
</div>

<div uk-alert="animation: uk-animation-scale-up; duration:1100">
    <a href="#" class="uk-alert-close" uk-close></a>
    <p><strong>Alert!</strong> Жизнь — это непрекращающееся рождение, и себя принимаешь таким, каким становишься.</p>
</div>

Параметры для атрибута

При использовании компонента Alert к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

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

animation является Primary опцией. Если animation это единственный параметр в значении атрибута, то её ключ можно не использовать. 

<span uk-alert="uk-animation-*"></span>

JavaScript

Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.

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

UIkit.alert(element, options);

События

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

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

Методы

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

Close

UIkit.alert(element).close();

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