Компонент Уведомления (Алерт) 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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

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

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

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

Примеры

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

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

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

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

JavaScript

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

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

UIkit.alert(element, options);

События

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

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

Методы

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

Close

UIkit.alert(element).close();

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