Компонент Алерт 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>
- Пример №1
- Панель Алерт с анимацией
slide-bottom
при закрытии. - Пример №2
- Окно с уведомлением и анимацией
scale-up
, блок с измененной продолжительностью исчезновения.
-
-
<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>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.alert(element, options);
События
Следующие события будут инициированы для элементов компонента «Alert»:
Имя события | Описание |
---|---|
beforehide |
Срабатывает до того, как элемент скрыт. Может предотвратить скрытие, вернув false . |
hide |
Срабатывает после скрытия элемента. |
Методы
Для компонента «Alert» доступны следующие методы:
Close
UIkit.alert(element).close();
Закрывает и удаляет диалоговое окно Alert.