Документация UIkit 3 на русском

Главная
Уведомления

Создавайте информационные уведомления, которые исчезают автоматически.

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

Уведомление не исчезнет, а останется видимым при наведении на сообщение, пока оно не прекратится. Вы также можете закрыть уведомление, нажав на него.Для отображения уведомлений компонент предоставляет простой 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: 'Сообщение'})">Кликните</button>

HTML формат

Вы можете использовать HTML внутри своего уведомления и значки из компонента Иконки.

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> Message with an icon'})">With icon</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>

Стиль

Можно изменить стиль уведомления, добавив к нему соответствующий статус — успешно, предупреждение или опасность.

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-default demo" type="button" onclick="UIkit.notification({message: 'Primary message...', status: 'primary'})">Primary</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Success message...', status: 'success'})">Success</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Warning message...', status: 'warning'})">Warning</button>
    <button class="uk-button uk-button-default demo" type="button" onclick="UIkit.notification({message: 'Danger message...', status: 'danger'})">Danger</button>
</p>

Закрыть все

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

<button class="uk-button uk-button-default close" onclick="UIkit.notification.closeAll()">Close All</button>

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

Любой из этих параметров может быть применен к атрибуту компонента. Разделяйте несколько вариантов точкой с запятой. Подробнее о синтаксисе

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

JavaScript

Подробнее о компонентах JavaScript.

Initialization

Это функциональный компонент, в котором может отсутствовать аргумент элемента.

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

События

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

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

Методы

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

Close

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

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

Имя	Тип	По умолчанию	Описание
`immediate`	Boolean	true	Отправка уведомления куда-либо.

Документация

Уведомления

Уважаемые пользователи!