zz-shopify-components 0.3.1-beta.4 → 0.3.1-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/zz-modal.md +22 -6
- package/package.json +1 -1
package/docs/zz-modal.md
CHANGED
|
@@ -5,6 +5,7 @@
|
|
|
5
5
|
- 高性能：零依赖、轻量动画、滚动锁、Backdrop 点击关闭、ESC 关闭
|
|
6
6
|
- 可扩展：Shadow DOM、`::part(...)`、CSS 变量、事件、编程式 API
|
|
7
7
|
- 易用：全局触发器 `[data-zz-modal-target]`、`[data-zz-modal-close]`
|
|
8
|
+
- 移动端 Drawer：加 `sheet-on-mobile` 时，小屏（≤768px）自下而上贴底弹出
|
|
8
9
|
|
|
9
10
|
---
|
|
10
11
|
|
|
@@ -36,12 +37,14 @@ Section 中通过 CSS 变量响应式配置：
|
|
|
36
37
|
}
|
|
37
38
|
```
|
|
38
39
|
|
|
39
|
-
Section
|
|
40
|
-
-
|
|
41
|
-
-
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
40
|
+
Section 设置项（当前实现）：
|
|
41
|
+
- 基本：`modal_id`（必填，挂到 `<zz-modal id="...">` 上）
|
|
42
|
+
- 显隐：`show_header`、`show_footer`
|
|
43
|
+
- 行为：`no_backdrop_close`（禁用遮罩点击关闭）
|
|
44
|
+
- 文案：`header_text`、`footer_text`
|
|
45
|
+
- 尺寸（移动/PC）：`width_mobile`、`width_pc`（支持 `px` 或 `vw`）
|
|
46
|
+
- 圆角（移动/PC）：`radius_mobile`、`radius_pc`（单位 px）
|
|
47
|
+
- 内边距（移动/PC）：`padding_mobile`、`padding_pc`（单位 px）
|
|
45
48
|
|
|
46
49
|
> 当 slot 为空时，组件会自动隐藏 Header/Footer（属性 `no-header-auto` / `no-footer-auto`）。
|
|
47
50
|
|
|
@@ -65,6 +68,16 @@ Section 设置项（已实现）：
|
|
|
65
68
|
<!-- 任意元素 data-zz-modal-target="#id" 可打开对应弹窗 -->
|
|
66
69
|
```
|
|
67
70
|
|
|
71
|
+
移动端 Drawer 用法（≤768px 时贴底弹出）：
|
|
72
|
+
```html
|
|
73
|
+
<zz-modal id="m1" sheet-on-mobile>
|
|
74
|
+
<div slot="header">标题</div>
|
|
75
|
+
<div>内容</div>
|
|
76
|
+
<div slot="footer"><button data-zz-modal-close>关闭</button></div>
|
|
77
|
+
<!-- Drawer 下 body 会自动为底部预留安全区 padding -->
|
|
78
|
+
</zz-modal>
|
|
79
|
+
```
|
|
80
|
+
|
|
68
81
|
---
|
|
69
82
|
|
|
70
83
|
### 编程式 API
|
|
@@ -86,6 +99,7 @@ modal.toggle(); // 切换
|
|
|
86
99
|
- `inert-others`：打开时让页面其它区域 inert（更强的可访问隔离）
|
|
87
100
|
- `no-header` / `no-footer`：强制隐藏 Header/Footer（无视 slot 内容）
|
|
88
101
|
- `no-header-auto` / `no-footer-auto`：组件自动加的属性，用于在对应 slot 为空时隐藏区域
|
|
102
|
+
- `sheet-on-mobile`：仅在小屏（≤768px）启用底部 Drawer 模式
|
|
89
103
|
|
|
90
104
|
---
|
|
91
105
|
|
|
@@ -114,6 +128,7 @@ CSS 变量：
|
|
|
114
128
|
- `--zz-modal-backdrop`（默认 `rgba(0,0,0,0.5)`）
|
|
115
129
|
- `--zz-modal-backdrop-filter`（默认 `blur(0px)`）
|
|
116
130
|
- `--zz-modal-z-index`（默认 `9999`）
|
|
131
|
+
- `--zz-sheet-width`（Drawer 模式宽度，默认 `100%`）
|
|
117
132
|
|
|
118
133
|
Shadow Parts：
|
|
119
134
|
- `dialog`、`backdrop`、`panel`、`header`、`body`、`footer`、`close-button`
|
|
@@ -160,6 +175,7 @@ zz-modal:not(:defined) { display: none !important; }
|
|
|
160
175
|
- 遮罩点击无效？检查是否设置了 `no-backdrop-close`。
|
|
161
176
|
- 页面滚动未锁定？移除 `no-scroll-lock` 或确认 CSS 未覆盖 `overflow`。
|
|
162
177
|
- Header/Footer 不显示？若未显式设置 `show_header/show_footer`，请确保 slot 有内容；或移除 `no-header/no-footer`。
|
|
178
|
+
- 移动端仍居中？确认 `<zz-modal>` 标签加了 `sheet-on-mobile`，并且视口宽度 ≤ 768px。
|
|
163
179
|
|
|
164
180
|
---
|
|
165
181
|
|