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

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

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

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

Чтобы применить компонент 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, String true Плавное исчезновение
или используйте компонент Анимация.
duration Number 150 Продолжительность анимации в миллисекундах.
sel-close CSS selector .uk-alert-close Триггерный элемент закрытия.

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

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

Дополнительные примеры

Alert с анимацией slide-bottom.

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

  • <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>

Окно Alert с анимацией scale-up и измененной продолжительностью исчезновения.

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

  • <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>

JavaScript

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

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

UIkit.alert(element, options);

События

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

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

Методы

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

Close

UIkit.alert(element).close();

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

Документация
Компоненты