# 通知/Notify
创建可以被拨动显示的通知,并且能自动淡出。
当你将鼠标悬停在通知上面时,它不会自动消失,直到你移开鼠标。还可以通过点击关闭通知。
* * *
## 用法
通知组件提供了一个简单的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 */ });
```
### Example
![](https://box.kancloud.cn/2016-05-12_57346f3fdd493.jpg)
```
UIkit.notify("Message...");
```
* * *
### HTML 信息
可以在通知信息内嵌HTML,比如 [图标](icon.html)。
### Example
![](https://box.kancloud.cn/2016-05-12_57346f3fee508.jpg)
```
UIkit.notify("<i class='uk-icon-check'></i> Message with an icon...");
```
* * *
### 延迟和常驻/Delay and sticky
你可以通过 `timeout` 定义在多少毫秒内通知消息是可见的。还可以把延迟设为0,让通知消息常驻不消失。
### Example
![](https://box.kancloud.cn/2016-05-12_57346f4009e90.jpg)
```
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'})
```
![](https://box.kancloud.cn/2016-05-12_57346f401a1c4.jpg)
* * *
### 状态
通知可以通过添加一些状态效果来表达一般的消息,成功的消息,警告或者危险等等。
`info`
```
UIkit.notify("...", {status:'info'})
```
`success`
```
UIkit.notify("...", {status:'success'})
```
`warning`
```
UIkit.notify("...", {status:'warning'})
```
`danger`
```
UIkit.notify("...", {status:'danger'})
```
![](https://box.kancloud.cn/2016-05-12_57346f40387b9.jpg)
- UIkit 中文文档
- 开始使用
- 初学者
- 开始使用
- 如何自定义
- 布局示例
- 开发者
- 项目结构
- Less & Sass 文件
- 创建主题
- 创建样式
- Customizer.json
- JavaScript
- 自定义前缀
- 核心组件
- 默认
- 基础
- 打印
- 布局类组件
- 网格
- 面板/Panel
- 块/Block
- 文章
- 评论/Comment
- 效果/Utility
- Flex 布局
- 覆盖/Cover
- 导航类组件
- 导航菜单
- 导航栏
- 二级导航
- 面包屑/Breadcrumb
- 分页
- 选项卡
- 缩略图导航/Thumbnav
- 页面元素
- 列表
- 描述列表
- 表格
- 表单
- 常用组件
- 按钮
- 图标
- 关闭/Close
- 徽章/Badge
- 提示框
- 缩略图/Thumbnail
- 遮罩/Overlay
- 文本
- 列
- 动画
- 对比度/Contrast
- JAVASCRIPT组件
- 下拉菜单
- 模态对话框
- 抽屉/Off-canvas
- 切换器/Switcher
- 拨动/toggle
- 滚动监听/Scrollspy
- 平滑滚动
- 附加组件
- 布局类组件
- 动态网格
- 视差网格
- 导航类组件
- 圆点导航
- 滑动导航/Slidenav
- 动态分页
- 常用组件
- 高级表单
- 文件表单/Form file
- 密码表单
- 选择表单
- 占位符
- 进度条/Progress
- JAVASCRIPT组件
- 灯箱/Lightbox
- 自动完成/Autocomplete
- 日期选择器/Datepicker
- HTML 编辑器
- 滚动条/Slider
- 滑块集/Slideset
- 幻灯片/Slideshow
- 视差/Parallax
- 手风琴/Accordion
- 通知/Notify
- 搜索/Search
- 可嵌套/Nestable
- 可排序/Sortable
- 附着/Sticky
- 时间选择器
- 工具提示/Tooltip
- 上传