Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@_nu/css-dialog

Package Overview
Dependencies
Maintainers
2
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@_nu/css-dialog - npm Package Compare versions

Comparing version
0.1.2
 to
0.1.3
+11
-0
CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log

## [0.1.3](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.2...@_nu/css-dialog@0.1.3) (2020-08-16)
### Bug Fixes
* 让 dialog 组件依赖 modal 组件 ([315811e](https://github.com/nu-system/css-dialog/commit/315811ec8b0787b5c08792690f20747bfdb25590))
## [0.1.2](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.1...@_nu/css-dialog@0.1.2) (2020-08-16)

@@ -8,0 +19,0 @@ 

+1
-4
lib/index.css

@@ -1,6 +0,3 @@

.nu_dialog_wrap{border:none 0;padding:0;margin:0;background-color:transparent;position:fixed;z-index:200;top:0;left:0;width:100%;height:100%;overflow:auto;display:none;visibility:hidden;opacity:0}
.nu_dialog_wrap[open]{display:block;visibility:visible;opacity:1}
.nu_dialog{background-color:#fff;position:relative;z-index:1;transition:transform .2s}
.nu_dialog_wrap[open] .nu_dialog{transform:translate(0,0)}
.nu_dialog_mask{padding:0;border:none 0;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}
.nu_modal[open] .nu_dialog{transform:translate(0,0)}
.nu_dialog_close{text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;right:0}
+5
-2
package.json
{
"name": "@_nu/css-dialog",
"version": "0.1.2",
"version": "0.1.3",
"description": "NU 「 no-ui 」 组件库系统 nu-system「 弹窗组件 」",

@@ -33,3 +33,6 @@ "author": "yfe-team",

},
"gitHead": "1ec491944bb35a76e5e6272e354277b86ce1592b"
"dependencies": {
"@_nu/css-modal": "^0.0.6"
},
"gitHead": "61dee0cf05370ca48c9c1420b4c57e3e2913f2fe"
}
+31
-47
README.md

@@ -10,10 +10,5 @@ # css-dialog

[npm-downloads]: https://img.shields.io/npm/dw/@_nu/css-dialog
[git-url]: https://github.com/nu-system/css-dialog
[git-badge]: https://img.shields.io/github/stars/nu-system/css-dialog.svg?style=social
[git-url]: https://github.com/nu-system/css
[git-badge]: https://img.shields.io/github/stars/nu-system/css.svg?style=social
<iframe height="600" style="width: 100%;" scrolling="no" title="nu-dialog-js" src="//codepen.io/ziven27/embed/joKGvJ/?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ziven27/pen/joKGvJ/'>nu-dialog-js</a> by ziven27
(<a href='https://codepen.io/ziven27'>@ziven27</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
css vanilla dialog component.

@@ -27,7 +22,8 @@

**注意**：会同时安装依赖 @\_nu/css-modal。
```
@_nu/css-dialog/css
├── core.css // 核心代码
├── transition.css // 核心代码
└── position
@_nu/css-dialog/lib
├── index.css // 核心代码
└── skins
├── top.css // 居上显示

@@ -44,8 +40,5 @@ ├── right.css // 居右显示

| 选择器 | 功能 |
|:----------|-------------:|
| `#nu_dialog_root` | 将所有弹窗都放到该容器下 |
| `.nu_dialog_wrap` | 整个弹窗主容器 |
| `.nu_dialog_mask` | 弹窗遮罩 |
| `.nu_dialog` | 弹窗主体 |
| 选择器 | 功能 |
| :----------------- | -----------: |
| `.nu_dialog` | 弹窗主体 |
| `.nu_dialog_close` | 弹窗关闭按钮 |

@@ -57,6 +50,5 @@

<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>
<!-- others -->
<dialog role="dialog" tabindex="-1" class="nu_modal">
<button title="mask" class="nu_mask"></button>
<section class="nu_dialog">

@@ -67,3 +59,2 @@ <button id="close" title="close" class="nu_dialog_close">&times;</button>

</dialog>
</div>
</body>

@@ -74,14 +65,13 @@ ```

| 选择器 | 功能 |
|:----------|-------------:|
| `.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_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 这边只是约定了 几个 CSS Hooks 的方案，所以对于使用方来说，可以使用任意 js 框架（原生 js，jquery, react, vue ...）去切换这些 API 的属性即可。
## 如何添加动效?

@@ -93,3 +83,3 @@

}
.nu_dialog{
.nu_dialog {
transform: translate(0, 50px);

@@ -105,7 +95,2 @@ }

<iframe height="600" style="width: 100%;" scrolling="no" title="nu-dialog-ani" src="//codepen.io/ziven27/embed/KLemVx/?height=265&theme-id=dark&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/ziven27/pen/KLemVx/'>nu-dialog-ani</a> by ziven27
(<a href='https://codepen.io/ziven27'>@ziven27</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## Do less but can be more

@@ -119,7 +104,6 @@

## Logic Only
- [react](https://nu-system.github.io/react/dialog/)
- [vue](https://nu-system.github.io/vue/dialog/)
- [react](https://nu-system.github.io/react)
- [vue](https://nu-system.github.io/vue)

@@ -129,8 +113,8 @@ ## Npm CDN

```HTML
<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">
<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">
```
-65
css/core.css
/* dialog wrapper */
.nu_dialog_wrap {
/* remove default style of dialog */
border: none 0;
padding: 0;
margin: 0;
background-color: transparent;
/* 模态框铺满全屏 */
position: fixed;
/* 建议使用全局参数 $z_dialog */
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 内容超高的时候，显示滚动条 */
overflow: auto;
display: none;
visibility: hidden;
opacity: 0;
}
.nu_dialog_wrap[open] {
display: block;
visibility: visible;
opacity: 1;
}
/* dialog main */
.nu_dialog {
background-color: #fff;
position: relative;
z-index: 1;
-webkit-transition: -webkit-transform 200ms;
transition: -webkit-transform 200ms;
transition: transform 200ms;
transition: transform 200ms, -webkit-transform 200ms;
}
.nu_dialog_wrap[open] .nu_dialog {
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
/* 弹窗遮罩 */
.nu_dialog_mask {
padding: 0;
border: none 0;
/* 铺满全屏 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 黑色半透明 */
background-color: rgba(0, 0, 0, 0.5);
}
/* close btn */
.nu_dialog_close {
text-align: center;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
top: 0;
right: 0;
}
-6
css/position/bottom.css
._bottom .nu_dialog {
position: absolute;
left: 0;
width: 100%;
bottom: 0;
}
-10
css/position/left.css
/*====== 左对齐弹窗*/
._left .nu_dialog {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 80%;
max-width: 400px;
bottom: 0;
}
-34
css/position/middle.css
/*====== 上下左右居中弹窗*/
.nu_dialog_wrap._middle {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 16px;
padding-bottom: 16px;
/* 水平居中关键 */
text-align: center;
/* 让 vertical-align: middle; 完美垂直居中 */
font-size: 0;
}
/* .nu_dialog 元素和这个伪元素垂直居中 */
.nu_dialog_wrap._middle:after {
content: "";
height: 100%;
display: inline-block;
width: 0;
vertical-align: middle;
margin-left: -1px;
/* 防止 .yf_dialog 过宽，伪元素换行 */
}
._middle .nu_dialog {
width: 90%;
/* 在小屏下，流出左右空白区域*/
max-width: 600px;
display: inline-block;
/* inline-block布局 */
vertical-align: middle;
/* 对齐 .nu_dialog:after */
text-align: left;
/* 让 dialog 内部文字还原到左对齐 */
font-size: 16px;
/* 让 dialog 内部文字还原到基础字号 */
}
-10
css/position/right.css
/*====== 右对齐弹窗*/
._right .nu_dialog {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 80%;
max-width: 400px;
bottom: 0;
}
-7
css/position/top.css
/*====== 顶部对齐弹窗*/
._top .nu_dialog {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
-15
css/transition.css
.nu_dialog_wrap {
display: block;
}
.nu_dialog {
-webkit-transform: translate(0, 50px);
transform: translate(0, 50px);
}
.nu_dialog_wrap {
-webkit-transition: opacity 200ms, visibility 200ms;
transition: opacity 200ms, visibility 200ms;
}
.nu_dialog_wrap[open] {
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}