返回介绍

通知

发布于 2019-05-26 16:28:28 字数 2630 浏览 1049 评论 0 收藏 0

创建可以被拨动显示的通知,并且能自动淡出。

当你将鼠标悬停在通知上面时,它不会自动消失,直到你移开鼠标。还可以通过点击关闭通知。

用法

通知组件提供了一个简单的API,你可以在应用程序代码中重用它。下面的JavaScript代码片段让你快速上手。注意 使用此组件需要额外添加 notify.css 文件,在css/components文件夹中。此组件需要额外添加 notify.js 文件,在js/components文件夹中。

JavaScript

UIkit.notify({
    message : 'Bazinga!',
    status  : 'info',
    timeout : 5000,
    pos     : 'top-center'
});
// Shortcuts
UIkit.notify('My message');
UIkit.notify('My message', status);
UIkit.notify('My message', { /* options */ });
UIkit.notify("Message...");

HTML 信息

可以在通知信息内嵌HTML,比如 图标。

<button class="uk-button" data-message=" Message with an icon...">With icon
UIkit.notify("<i class='uk-icon-check'></i> Message with an icon...");

延迟和常驻 / Delay and sticky

你可以通过 timeout 定义在多少毫秒内通知消息是可见的。还可以把延迟设为0,让通知消息常驻不消失。

UIkit.notify("Message...", {timeout: 0});

定位

添加以下参数中的一个来调整通知出现的位置。

参数代码
top-center
UIkit.notify("...", {pos:'top-center'})
top-left
UIkit.notify("...", {pos:'top-left'})
top-right
UIkit.notify("...", {pos:'top-right'})
bottom-center
UIkit.notify("...", {pos:'bottom-center'})
bottom-left
UIkit.notify("...", {pos:'bottom-left'})
bottom-right
UIkit.notify("...", {pos:'bottom-right'})

状态

通知可以通过添加一些状态效果来表达一般的消息,成功的消息,警告或者危险等等。

状态代码
info
UIkit.notify("...", {status:'info'})
success
UIkit.notify("...", {status:'success'})
warning
UIkit.notify("...", {status:'warning'})
danger
UIkit.notify("...", {status:'danger'})

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文