Компонент Алерт 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.