iter(g101): 新增锚点导航组件 anchor
This commit is contained in:
@@ -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 回写不堆历史"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user