Компонент Уведомление : Notification

Уведомления которые исчезают автоматически.

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

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

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

JavaScript

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

// Shortcuts
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 внутри вашего сообщения, к примеру значок из компонента векторные иконки UIkit 3.

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=\'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 Integer 5000 Длительность видимости до исчезновения уведомления.
group String null Полезно, если вы хотите закрыть все уведомления в определенной группе.
pos String top-center Позиция отображения.

JavaScript

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

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

This is a Functional Component and may omit the element argument.

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

События

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

Название Описание
close Срабатывает после закрытия уведомления.

Методы

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

Close

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

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

Название Тип По умолчанию Описание
immediate Boolean true Transition the notification out.
Документация
Компоненты