@_nu/css-dialog

    0.1.7 • Public • Published

    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(050px);
    }
    .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">

    Install

    npm i @_nu/css-dialog

    DownloadsWeekly Downloads

    55

    Version

    0.1.7

    License

    MIT

    Unpacked Size

    20.6 kB

    Total Files

    32

    Last publish

    Collaborators

    • nanasun
    • ziven27