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

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

Создавайте переключаемые уведомления с использованием HTML внутри вашего сообщения. Установите уведомлению необходимую позицию и задайте ему стиль.

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

Уведомление не исчезает сразу, оно будет отображаться заданное ему время и останется видимым при наведении на него. Вы можете закрыть всплывшее уведомление, нажав на него. Для отображения уведомлений компонент 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 UIkit.notification("...", {pos: 'top-left'})
top-center UIkit.notification("...", {pos: 'top-center'})
top-right UIkit.notification("...", {pos: 'top-right'})
bottom-left UIkit.notification("...", {pos: 'bottom-left'})
bottom-center UIkit.notification("...", {pos: 'bottom-center'})
bottom-right UIkit.notification("...", {pos: '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 UIkit.notification("...", {status:'primary'})
success UIkit.notification("...", {status:'success'})
warning UIkit.notification("...", {status:'warning'})
danger UIkit.notification("...", {status:'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 к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.

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

Опции Значение По умочанию Описание
message String false Сообщение уведомления для отображения.
status String null Цвет статуса уведомления.
timeout Number 5000 Длительность видимости до исчезновения уведомления.
Если установлено значение 0, уведомление не будет скрываться автоматически.
group String Полезно, если вы хотите закрыть все уведомления в определенной группе.
pos String top-center Позиция отображения.

JavaScript

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

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

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

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

События

Следующие события будут инициированы для элементов компонента «Notification»:
Имя события Описание
close Срабатывает после закрытия уведомления.

Пример

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

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

Методы

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

Close

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

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

Название Тип По умолчанию Описание
immediate Boolean true Переход уведомления.

Доступность

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

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