Компонент Уведомления (Алерт) 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>
Примеры
-
-
<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.