@\_nu/react-dialog

[![npm package][npm-badge]][npm-url]
[![npm downloads][npm-downloads]][npm-url]
[![github][git-badge]][git-url]

[npm-badge]: https://img.shields.io/npm/v/@_nu/react-dialog.svg
[npm-url]: https://www.npmjs.org/package/@_nu/react-dialog
[npm-downloads]: https://img.shields.io/npm/dw/@_nu/react-dialog
[git-url]: https://github.com/nu-system/react-dialog
[git-badge]: https://img.shields.io/github/stars/nu-system/react-dialog.svg?style=social

一个兼顾无障碍范围，易用性，且没有 UI 依赖的 React 对话框组件.

@_nu/react-dialog 本身不会输出任何样式，所有 demo 样式均来自于@\_nu/css-dialog。

安装

``
$ npm i @_nu/react-dialog
`

二次封装

在你的项目组件库文件夹中创建一个新的 Dialog 组件.

`
components/
└── Dialog/
├── index.d.ts // 定义文件，为了更好的代码提示
├── index.js // 主文件
└── style.css // 样式文件
`

`JSX
import React from 'react';
import { NuDialog, NuMask, NuModal, NuClose } from '@_nu/react-dialog';
import '@_nu/css-dialog';
import '@_nu/css-dialog/lib/skins/middle.css';
import '@_nu/css-dialog/lib/skins/top.css';
import '@_nu/css-dialog/lib/skins/left.css';
import '@_nu/css-dialog/lib/skins/bottom.css';
import '@_nu/css-dialog/lib/skins/right.css';
import './style.css';

function Dialog({ children, onClose, ...otherProps }) {
return (



{children}



);
}

export default Dialog;
`

使用

`JSX
import React, { useState } from "react";
import Dialog from "./components/Dialog";

function Demo() {
const [open, setOpen] = useState(false);
return (



);
}
export default App;
`

Dom

`JSX


{children}
×


`

子组件

| props | 功能 | API |
| :------- | ----------------- | --------------------------------: |
| Modal | 弹窗组件 | 点击查看 |
| Portal | 已内置在 Modal 中 | 点击查看 |
| Mask | 蒙层组件 | 点击查看 |
| Dialog | 内容容器组件 | 点击查看 |
| Close | 关闭按钮 | 点击查看 |

`jsx
// @_nu/react-dialog
import NuModal from './Modal';
import NuMask from './Mask';
import NuDialog from './Dialog';
import NuClose from './Close';
import NuPortal from './Portal';

export default NuDialog;
export { NuMask, NuModal, NuClose, NuPortal };
`

$3

`CSS
.nu_dialog {
transform: translate(0, -50px);
}
._top .nu_dialog {
transform: translate(0, -50px);
}
._bottom .nu_dialog {
transform: translate(0, 50px);
}
._right .nu_dialog {
transform: translate(50px, 0);
}
._left .nu_dialog {
transform: translate(-50px, 0);
}

/ 默认终点状态 /
.nu_modal[open] .nu_dialog{
transform: translate(0, 0);
}
`

你只需要定义 .nu_dialog 的起点状态即可。

技术方案

@_nu/react-dialog` 灵感来自以下几个优秀的开源框架：

- react-aria-modal
- focus-trap-react
- material-ui
- nu-system