iter(e05): 新增 divider 分隔线组件

This commit is contained in:
HIsheR
2026-10-23 18:14:47 +08:00
parent 84d008b5fd
commit c457e0cc33
12 changed files with 175 additions and 7 deletions
+24 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-23T10:11:22.346Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-23T10:14:36.972Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -696,6 +696,28 @@ empty({ title: '暂无数据', description: '调整筛选条件后再试', actio
现场演示:apps/docs/demo.html#sec-empty
### divider — 分隔线 Divider
参数:
- label:string —— 居中文案标签;缺省纯线条
- vertical:boolean —— 是否垂直分隔线(用于行内工具栏);缺省水平
- dashed:boolean —— 是否虚线;缺省实线
示例:
```
divider({ label: '更多信息' }) / divider({ vertical: true })
```
手把手:
1. 在区块之间插入 divider 划分内容层次
2. 传 label 在水平线上显示居中文案,如「更多信息」
3. 工具栏内用 vertical: true 的行内竖线,dashed: true 切虚线弱化分隔感
现场演示:apps/docs/demo.html#sec-divider
### pagination — 分页器 Pagination
参数:
@@ -874,6 +896,7 @@ API 速览:
- stepper(props):步骤条,done/current/upcoming 三态,active 信号双向绑定,clickable 时已完成步骤可回跳
- rate(props):评分星标,value 信号双向绑定,hover 预览移出还原,键盘方向键调节,max 可配
- empty(props):空状态占位,title/description 可选,action 放操作区
- divider(props):分隔线,水平/垂直两种方向,可带居中文案标签,dashed 切虚线
- modal(props, ...children):弹窗,open 信号驱动显隐,Esc / 遮罩 / × 关闭,size 三档宽度,footer 提供底部操作区
- drawer(props, ...children):抽屉,open 信号驱动侧滑面板,placement 左右可配、width 可调、footer 操作区,遮罩 / × / Esc 关闭
- form(props, items):表单容器,布局 + 聚合校验,全部通过才触发 onSubmit