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
+20
View File
@@ -11,6 +11,7 @@ import {
accordion,
affix,
alert,
anchor,
autoComplete,
avatar,
backTop,
@@ -1152,6 +1153,25 @@ const content = h(
h('p', { class: 'desc' }, '标题行右侧放操作或统计,底部 footer 放主次按钮;hoverable 时整卡悬停浮起。'),
),
),
section(
'sec-anchor',
'锚点导航',
'竖排区块链接:滚动时按目标位置高亮当前区块并同步 aria-current,点击按 offset 偏移量平滑定位、hash 用 replaceState 回写(不堆历史);禁用项留在列表里不响应,目标缺失的项在判定时自动跳过。',
card(
{ title: '跳到本页区块' },
anchor({
items: [
{ href: '#sec-anchor', title: '锚点导航(本节)' },
{ href: '#sec-table', title: '数据表格' },
{ href: '#sec-card', title: '卡片容器' },
{ href: '#sec-missing-zone', title: '不存在的区块(自动跳过)' },
{ href: '#sec-affix', title: '吸顶容器(禁用示例)', disabled: true },
],
offset: 12,
onChange: (href) => toast.info(`已跳到 ${href}`),
}),
),
),
);
// 引导漫游实例:根节点需挂到 body(fixed 定位,不参与布局)