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
+41 -1
View File
@@ -71,7 +71,8 @@
"watermark(props, ...children):内容容器 + 平铺水印覆盖层,canvas 生成单元、颜色取自令牌,覆盖层不挡交互",
"checkboxGroup(props):多选组,value 为数组信号,min/max 用禁用边界项实现(不抛错),checkAll 支持半选且只统计未禁用项",
"affix(props, ...children):固钉,滚过 offset 后内容转 fixed 贴顶、外层保留占位高度,固定后宽度随容器自适应",
"multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用"
"multiSelect(props):多选下拉,标签式回显 + 可搜索弹层,点选不收起便于连续多选,max 到限后未选项禁用",
"anchor(props):锚点导航,竖排区块链接,滚动时按目标位置高亮当前区块(aria-current 同步),点击按 offset 偏移量平滑定位并回写 hash;container 可指定内滚容器"
],
"keyTypes": [
"ButtonProps",
@@ -2701,6 +2702,45 @@
"↑↓ 环形移动高亮、Enter 切换当前项、Esc 收起(与其它弹层共用一个 Esc 栈)",
"value 传数组信号即受控,外部写入会同步标签区"
]
},
{
"id": "anchor",
"title": "锚点导航 Anchor",
"demo": "sec-anchor",
"props": [
{
"n": "items",
"t": "AnchorItem[]",
"d": "锚点项集合,每项含 href(形如 #sec-x)、title、可选 disabled"
},
{
"n": "offset",
"t": "number",
"d": "定位与高亮判定预留的顶部距离,适合有吸顶栏的页面;缺省 0"
},
{
"n": "container",
"t": "HTMLElement | Window",
"d": "监听的滚动容器;缺省 window(整页滚动)"
},
{
"n": "label",
"t": "string",
"d": "nav 的无障碍名称;缺省「锚点导航」"
},
{
"n": "onChange",
"t": "(href: string) => void",
"d": "跳转后的回调,参数为命中的 href(适合埋点或联动)"
}
],
"example": "anchor({ items: [{ href: '#sec-button', title: '按钮' }, { href: '#sec-card', title: '卡片' }], offset: 72 })",
"steps": [
"在页面任意位置放一个容器,调用 anchor 并把返回的 nav 塞进去(固定侧栏或吸顶栏均可)",
"items 里每条 href 指向页面上真实存在的区块 id,标题即链接文案;目标缺失的项在滚动判定时自动跳过",
"页面有吸顶导航时把它的高度传给 offset,跳转与高亮判定都会预留这段距离",
"滚动容器不是整页时用 container 传入该元素;点击走平滑滚动,系统开启「减少动效」时改为瞬移,hash 用 replaceState 回写不堆历史"
]
}
]
}