@_nu/css-dialog

NU 「 no-ui 」 组件库系统 nu-system「 弹窗组件 」

Usage no npm install needed!

<script type="module">
  import NuCssDialog from 'https://cdn.skypack.dev/@_nu/css-dialog';
</script>

README

css-dialog

npm package npm downloads github

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 标签作为 maskclose 的标签。

选择器 功能
.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

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">