UIkit3.x文档

通知

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

用法

当您将鼠标悬停在通知消息上面时,通知将不会自动消失,持续保持可见状态,直到您停止将鼠标悬停在其上面为止。 也可以通过单击关闭通知。 为了显示通知,该组件提供了一个简单的 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 将通知移出。