Notification

创建可自动淡出的可切换通知。

用法

当鼠标悬停在消息上时，通知不会淡出，而会一直保持可见，直到不再悬停。你也可以点击通知将其关闭。要显示通知，组件提供了一个简单的 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>

注意消息会以 HTML 形式渲染。清洗过滤由开发者负责。

位置

添加以下任意一个参数，可将通知的位置调整到不同的边角。

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-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`	Number	`5000`	通知消失前的可见时长。如果设置为 `0`，通知不会自动隐藏。
`group`	String		当你想关闭某个特定分组中的所有通知时会很有用。
`pos`	String	`top-center`	显示位置所在的边角。

JavaScript

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

初始化

这是一个 Functional Component，可以省略元素参数。

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

事件

以下事件会在绑定了该组件的元素上触发：

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

方法

该组件提供以下方法：

关闭

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

关闭通知。

名称	类型	默认值	描述
`immediate`	Boolean	true	让通知以过渡效果退出。

可访问性

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

通知带有 alert 角色。

文档

Notification