A fully accessible、flexible、unstyled React dialog component
npm install @_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 (
Dom
`JSX
`子组件
| 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