iter(g101): 新增锚点导航组件 anchor

This commit is contained in:
HIsheR
2026-10-26 13:50:12 +08:00
parent befed761d9
commit 265842ef63
13 changed files with 303 additions and 10 deletions
+27 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T05:16:55.417Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T05:49:43.206Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1562,6 +1562,31 @@ multiSelect({ value: tagPick, max: 3, placeholder: '选择技术栈', options: [
现场演示:apps/docs/demo.html#sec-multiselect
### anchor — 锚点导航 Anchor
参数:
- items:AnchorItem[] —— 锚点项集合,每项含 href(形如 #sec-x)、title、可选 disabled
- offset:number —— 定位与高亮判定预留的顶部距离,适合有吸顶栏的页面;缺省 0
- container:HTMLElement | Window —— 监听的滚动容器;缺省 window(整页滚动)
- label:string —— nav 的无障碍名称;缺省「锚点导航」
- onChange:(href: string) => void —— 跳转后的回调,参数为命中的 href(适合埋点或联动)
示例:
```
anchor({ items: [{ href: '#sec-button', title: '按钮' }, { href: '#sec-card', title: '卡片' }], offset: 72 })
```
手把手:
1. 在页面任意位置放一个容器,调用 anchor 并把返回的 nav 塞进去(固定侧栏或吸顶栏均可)
2. items 里每条 href 指向页面上真实存在的区块 id,标题即链接文案;目标缺失的项在滚动判定时自动跳过
3. 页面有吸顶导航时把它的高度传给 offset,跳转与高亮判定都会预留这段距离
4. 滚动容器不是整页时用 container 传入该元素;点击走平滑滚动,系统开启「减少动效」时改为瞬移,hash 用 replaceState 回写不堆历史
现场演示:apps/docs/demo.html#sec-anchor
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1623,6 +1648,7 @@ API 速览:
- checkboxGroup(props):多选组,value 为数组信号,min/max 用禁用边界项实现(不抛错),checkAll 支持半选且只统计未禁用项
- affix(props, ...children):固钉,滚过 offset 后内容转 fixed 贴顶、外层保留占位高度,固定后宽度随容器自适应
- multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用
- anchor(props):锚点导航,竖排区块链接,滚动时按目标位置高亮当前区块(aria-current 同步),点击按 offset 偏移量平滑定位并回写 hash;container 可指定内滚容器
一行用法: