通知

创建可切换的通知，这些通知会自动淡出。

用法

当您将鼠标悬停在消息上时，通知不会淡出，而是会保持可见，直到您停止悬停。您也可以通过点击通知来关闭它。为了显示通知，该组件提供了一个简单的 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'})

定位	代码
`左上角`	`UIkit.notification("…", {pos: 'top-left'})`
`上中`	`UIkit.notification("…", {pos: 'top-center'})`
`右上角`	`UIkit.notification("…", {pos: 'top-right'})`
`左下角`	`UIkit.notification("…", {pos: 'bottom-left'})`
`下中`	`UIkit.notification("…", {pos: 'bottom-center'})`
`右下角`	`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'})

样式	代码
`主要`	`UIkit.notification("…", {status:'primary'})`
`成功`	`UIkit.notification("…", {status:'success'})`
`警告`	`UIkit.notification("…", {status:'warning'})`
`危险`	`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`	字符串	`false`	要显示的通知消息。
`status`	字符串	`null`	通知状态颜色。
`timeout`	数字	`5000`	通知消失之前的可见时间。如果设置为 `0`，通知不会自动隐藏。
`group`	字符串		如果您想关闭特定组中的所有通知，这将很有用。
`pos`	字符串	`上中`	显示角落。

JavaScript

了解更多关于 JavaScript 组件.

初始化

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

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

事件

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

名称	描述
`close`	在通知关闭后触发。

方法

以下方法可用于组件

关闭

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

关闭通知。

名称	类型	默认值	描述
`immediate`	布尔值	true	将通知过渡出去。

无障碍

通知组件会自动设置适当的 WAI-ARIA 角色、状态和属性。

通知具有 alert 角色。

文档

通知