通知

创建可以切换显示和自动淡出的通知。

用法

当您将鼠标悬停在通知消息上面时，通知将不会自动消失，持续保持可见状态，直到您停止将鼠标悬停在其上面为止。也可以通过单击关闭通知。为了显示通知，该组件提供了一个简单的 JavaScript API。以下代码段可帮助您入门。

JavaScript

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

// Shortcuts
UIkit.notification('My message');
UIkit.notification('My message', status);
UIkit.notification('My message', { /* options */ });

<button class="demo uk-button uk-button-default" type="button" onclick="UIkit.notification({message: 'Notification message'})">Click me</button>

带HTML的消息

您可以在通知消息中使用HTML代码，例如图标组件中的图标。

UIkit.notification("<span uk-icon='icon: check'></span> Message");

<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'})

Position	Code
`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'})

Style	Code
`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>

组件选项

可以在组件属性中使用以下选项，用分号隔开多个选项。了解更多

Option	Value	Default	Description
`message`	String	`false`	要显示的通知消息。
`status`	String	`null`	通知的状态颜色。
`timeout`	Integer	`5000`	通知消失之前的可见时长。
`group`	String	`null`	关闭某一组中的所有通知
`pos`	String	`top-center`	显示在哪个位置。

JavaScript

了解更多关于 JavaScript 组件的内容。

初始化

这是一个功能性组件 Functional Component ，可以省略元素参数。

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

事件

将在附加了此组件的元素上触发以下事件：

Name	Description
`close`	通知被关闭后触发。

方法

以下方法可用于该组件：

关闭

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

关闭通知。

Name	Type	Default	Description
`immediate`	Boolean	true	将通知移出。

UIkit3.x文档