# nu-dialog
No UI 组件库系统 「 弹窗组件 」。
## 怎么用?
```
$ npm i @y-fe/nu-dialog
$ yarn add @y-fe/nu-dialog
```
```
@y-fe/nu-dialog/css
├── core.css // 核心代码
└── position
├── top.css // 居上显示
├── right.css // 居右显示
├── bottom.css // 居底显示
├── left.css // 居左显示
└── middle.css // 居中显示
```
因为组件只有最基础的交互样式，所以在实际使用需要根据设计需求进行二次样式封装。
## 子组件
| 选择器 | 功能 |
|:----------|-------------:|
| `.nu_dialog_wrap` | 整个弹窗主容器 |
| `.nu_dialog_mask` | 弹窗遮罩 |
| `.nu_dialog` | 弹窗主体 |
| `.nu_dialog_close` | 弹窗关闭按钮 |
和其它 UI 库的弹窗组件不同的是，在 Nu-system 中，我们并没有将 `title`,`header`,`body`,`footer` 列为弹窗的范畴。
在我们看来这几个组件的覆盖面都太小了。
## API
```HTML
```
为了无障碍可访问性，这边推荐使用 `label` 标签作为 `mask` 和 `close` 的标签。
| 选择器 | 功能 |
|:----------|-------------:|
| `.nu_dialog_wrap._open .nu_dialog` | 控制弹窗的显示隐藏 |
| `.nu_dialog_wrap._top .nu_dialog` | 弹窗居上 |
| `.nu_dialog_wrap._right .nu_dialog` | 弹窗居右 |
| `.nu_dialog_wrap._bottom .nu_dialog` | 弹窗居下 |
| `.nu_dialog_wrap._left .nu_dialog` | 弹窗居左 |
| `.nu_dialog_wrap._middle .nu_dialog` | 弹窗居中 |
| `body.nu_dialog_open` | 用于控制弹窗底层滚动条 |
nu-dialog 这边只是约定了 几个 CSS Hooks 的方案，所以对于使用方来说，可以使用任意js框架（原生js，jquery, react, vue ...）去切换这些API的属性即可。
**注**: 为了防止底层滚动条滚动，可以在弹窗显示的时候在滚动容器上添加 `body` | `html` 上添加 `.nu_dialog_open`。
## 如何添加动效?
```css
.nu_dialog_wrap._middle .nu_dialog{
transform: rotate(360deg) translate3D(0, 20%, 0);
}
.nu_dialog_wrap._middle._open .nu_dialog{
transform: rotate(0) translate3D(0, 0, 0);
}
```
## Someting awesome
```HTML
显示弹窗