README

css-dialog

css vanilla dialog component.

install

$ yarn add @_nu/css-dialog

注意：会同时安装依赖 @_nu/css-modal。

@_nu/css-dialog/lib
├── index.css       // 核心代码 dialog.css +  mask.css + modal.css
└── skins
    ├── dialog.css  // dialog
    ├── mask.css    // 遮罩
    ├── modal.css   // 弹层
    ├── top.css     // 居上显示
    ├── right.css   // 居右显示
    ├── bottom.css  // 居底显示
    ├── left.css    // 居左显示
    └── middle.css  // 居中显示

因为组件只有最基础的交互样式，所以在实际使用需要根据设计需求进行二次样式封装。

API

<body>
    <!-- others -->
    <dialog role="dialog" tabindex="-1" class="nu_modal">
        <button title="mask" aria-label="mask" class="nu_mask"></button>
        <section class="nu_dialog">
            <button id="close" title="close" aria-label="close" class="nu_dialog_close">&times;</button>
            <!-- here put the content -->
        </section>
    </dialog>
</body>

为了无障碍可访问性，这边推荐使用 buttton 标签作为 mask 和 close 的标签。

选择器	功能
`.nu_dialog`	弹窗主体
`.nu_dialog_close`	关闭按钮
`.nu_modal`	弹层
`.nu_mask`	遮罩
`.nu_modal[open] .nu_dialog`	控制弹窗的显示隐藏
`.nu_modal._top .nu_dialog`	弹窗居上
`.nu_modal._right .nu_dialog`	弹窗居右
`.nu_modal._bottom .nu_dialog`	弹窗居下
`.nu_modal._left .nu_dialog`	弹窗居左
`.nu_modal._middle .nu_dialog`	弹窗居中

nu-dialog 这边只是约定了几个 CSS Hooks 的方案，所以对于使用方来说，可以使用任意 js 框架（原生 js，jquery, react, vue ...）去切换这些 API 的属性即可。

如何添加动效?


.nu_dialog {
  transform: translate(0, 50px);
}
.nu_modal {
  transition: opacity 200ms, visibility 200ms;
}
.nu_modal[open] {
  transition: opacity 200ms;
}

Logic Only

react
vue

jsdelivr CDN

<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/lib/index.min.css" />
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/lib/skins/top.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/lib/skins/right.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/lib/skins/bottom.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/lib/skins/left.min.css">
<link src="https://cdn.jsdelivr.net/npm/@_nu/css-dialog/lib/skins/middle.min.css">

Usage no npm install needed!