@_nu/css-dialog 中文文档教程

发布于 4年前 浏览 21 项目主页 更新于 3年前

css-dialog

npm packagenpm downloadsgithub

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">
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文