通知

创建可切换的通知，它们会自动淡出。

用法

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

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 角色。

文档

通知