Компонент Всплывающее уведомление

Notification: Использование

Уведомление не исчезает сразу, оно будет отображаться заданное ему время и останется видимым при наведении на него. Вы можете закрыть всплывшее уведомление, нажав на него. Для отображения уведомлений компонент Notification предоставляет простой JavaScript API.
Следующий фрагмент кода поможет вам начать.

JavaScript

UIkit.notification({
    message: 'my-message!',
    status: 'primary',
    pos: 'top-right',
    timeout: 5000
});

// Кратко
UIkit.notification('Моё сообщение');
UIkit.notification('Моё сообщение', status);
UIkit.notification('Моё сообщение', { /* options */ });

• Результат
• Разметка

Нажми на меня

<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Cообщение - Уведомление..'})">Нажми на меня</button>

Добавление HTML

Добавление HTML в уведомление

Вы можете использовать разметку HTML внутри появляющегося сообщения, к примеру, значок из компонента векторные иконки UIkit 3 или asUIkit Material Icons 1000+.

UIkit.notification("<span uk-icon='icon: check'></span> Сообщение");

Уведомление с иконкой

• Результат
• Разметка

Уведомление с иконкой!

<button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: '<span uk-icon=check></span> Сообщение с иконкой'})">Уведомление с иконкой!</button>

Позиция

Установить позицию уведомлению

Добавьте один из следующих параметров, чтобы отображать появившееся уведомление в необходимой позиции.

UIkit.notification("...", {pos: 'top-right'})

• Результат
• Разметка

Top Left Top Center Top Right Bottom Left Bottom Center Bottom Right

<p uk-margin>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Left...', pos: 'top-left'})">Top Left</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Center...', pos: 'top-center'})">Top Center</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Top Right...', pos: 'top-right'})">Top Right</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Left...', pos: 'bottom-left'})">Bottom Left</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Center...', pos: 'bottom-center'})">Bottom Center</button>
    <button class="uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Bottom Right...', pos: 'bottom-right'})">Bottom Right</button>
</p>

Стили

Стиль уведомлений

Стиль уведомления можно изменить, достаточно будет указать соответствующий статус. Вы можете определить сообщение как primary, success (успешное), warning (предупреждающее) или danger (со статусом опасности).

UIkit.notification("...", {status: 'primary'})

Различные стили

• Результат
• Разметка

Primary Success Warning Danger

<p uk-margin>
    <button class="uk-button uk-button-primary demo" type="button" 
            onclick="UIkit.notification({
                     message: 'Primary сообщение...', 
                     status: 'primary'
                     })">Primary</button>
    <button class="uk-button uk-button-green demo" type="button" 
            onclick="UIkit.notification({message: 'Success сообщение...', status: 'success'})">Success</button>
    <button class="uk-button uk-button-warning demo" type="button" 
            onclick="UIkit.notification({message: 'Warning сообщение...', status: 'warning'})">Warning</button>
    <button class="uk-button uk-button-danger demo" type="button" 
            onclick="UIkit.notification({message: 'Danger сообщение...', status: 'danger'})">Danger</button>
</p>

Закрыть все

Если необходимо, вы можете закрыть все открытые уведомления одновременно:
UIkit.notification.closeAll().

• Результат
• Разметка

Закрыть все

<button class="uk-button uk-button-secondary" onclick="UIkit.notification.closeAll()">Закрыть все</button>

Параметры для атрибута

При использовании компонента Notification к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

JavaScript

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

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

Это Functional Component, в нем может отсутствовать аргумент элемента.

UIkit.notification(options);
UIkit.notification(message, status);

События

Пример

UIkit.util.on(document, 'close', '.uk-notification', function () {
	alert('Уведомление закрыто!')
})

Смотрите также функции JavaScript для работы с событиями DOM в разделе Event.
Реакция на событие, когда бы оно ни происходило см. util.on().

Методы

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

Close

UIkit.notification(element).close(immediate);

Закрывает уведомление.

Доступность

Компонент Notification автоматически устанавливает соответствующую роль, состояния и свойства WAI-ARIA.

• Уведомление имеет роль alert.