Dialog

npm package	npm downloads	jsdelivr	github

纯 CSS 弹窗组件。

使用

$ yarn add @_nu/css-dialog

@_nu/css-dialog/css
├── core.css        // 核心代码
├── transition.css        // 核心代码
└── position
    ├── top.css     // 居上显示
    ├── right.css   // 居右显示
    ├── bottom.css  // 居底显示
    ├── left.css    // 居左显示
    └── middle.css  // 居中显示

API

<body>
  <!-- others -->
  <div id="nu_dialog_root">
    <dialog tabindex="-1" id="dialog" class="nu_dialog_wrap">
        <button id="mask" title="mask" class="nu_dialog_mask"></button>
        <section class="nu_dialog">
            <button id="close" title="close" class="nu_dialog_close">&times;</button>
            <!-- here put the content -->
        </section>
    </dialog>
  </div>
</body>

为了无障碍可访问性，这边推荐使用 buttton 标签作为 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`	弹窗居中

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

如何添加动效?

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

Logic Only

react
vue

Npm CDN

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

# Dialog

# 使用

# API

# 如何添加动效?

# Logic Only

# Npm CDN

Dialog

使用

API

如何添加动效?

Logic Only

Npm CDN