nu-system
@_nu/react-dialog
一个兼顾无障碍范围，易用性，且没有 UI 依赖的 React 对话框组件.
@_nu/react-dialog 本身不会输出任何样式，所有 demo 样式均来自于@_nu/css-dialog。
安装
$ npm i @_nu/react-dialog二次封装
在你的项目组件库文件夹中创建一个新的 Dialog 组件.
components/
└── Dialog/
├── index.d.ts // 定义文件，为了更好的代码提示
├── index.js // 主文件
└── style.css // 样式文件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 (
<NuModal onClose={onClose} {...otherProps}>
<NuMask onClick={onClose} />
<NuDialog>
{children}
<NuClose onClick={onClose} />
</NuDialog>
</NuModal>
);
}
export default Dialog;使用
import React, { useState } from "react";
import Dialog from "./components/Dialog";
function Demo() {
const [open, setOpen] = useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
open
</button>
<Dialog open={open} onClose={() => setOpen(false)}>
<h3>hello world!</h3>
<p>Happy to see you again.</p>
</Dialog>
</div>
);
}
export default App;Dom
<dialog tabindex="0" role="dialog" class="nu_modal _middle" aria-describedby="alert-dialog-description" open>
<button type="button" title="Mask" aria-label="Mask" class="nu_mask "></button>
<section role="document" class="nu_dialog">
{children}
<button aria-label="Close" type="button" class="nu_dialog_close " title="Close" tabindex="0">×</button>
</section>
</dialog>子组件
| props | 功能 | API |
|---|---|---|
Modal |
弹窗组件 | 点击查看 |
Portal |
已内置在 Modal 中 | 点击查看 |
Mask |
蒙层组件 | 点击查看 |
Dialog |
内容容器组件 | 点击查看 |
Close |
关闭按钮 | 点击查看 |
// @_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 };Transition
.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 灵感来自以下几个优秀的开源框架：