Anchor 锚点导航
Rue 版 Anchor 保持锚点导航的核心能力:items、滚动激活、局部容器、受控高亮与横向模式; 视觉上换成更适合 Rue 站点的卡片式导航,不直接复制细线目录样式。
`items` 是完整增强路径。`Anchor.Link` children 仍然可用,但在 Rue 编译参与模式下会作为结构化回退渲染;需要完整滚动注册和高亮映射时,优先传 `items`。
# 基础吸顶导航
默认是纵向吸顶模式,适合长文档、报告页和参数配置页。
Chapter 01
项目全景
把长文档拆成可扫描的几段之后,Anchor 负责给读者一个稳定的阅读坐标。
Signal
4 blocks
BaseAnchor Section
适合文档、报告、配置中心等长页面。
激活态跟随滚动同步更新。
保持 Rue 自己的卡片化导航外观。
Chapter 02
内容节奏
每段都带一组短卡片,方便在示例 里快速看到滚动命中与视觉反馈。
Signal
Sticky
ScrollAnchor Section
段落标题支持任意 renderable。
可以挂描述文字,适合多层说明。
active 状态不依赖外部状态管理。
Chapter 03
能力边界
Anchor 的核心能力集中在页内导航、滚动定位和高亮控制,避免越权成完整目录树。
Signal
API-first
ControlAnchor Section
支持 `items` 驱动和自定义容器。
支持 `getCurrentAnchor` 做分组高亮。
可通过 `classNames / styles` 继续定制。
# 局部滚动容器
把 Anchor 绑定到自定义滚动面板,而不是整个 window。
Module A
Brief Intake
将阅读区域限制在一个滚动面板内,适合右侧固定大纲 + 左侧局部滚动的详情页。
Signal
Local
ContainerAnchor Section
`getContainer` 指向任意滚动容器。
`targetOffset` 可以和容器内头部高度对齐。
不需要监听页面外层滚动。
Module B
System Draft
容器滚动的 active 计算独立于 window,适合 modal、drawer、侧栏等局部视图。
Signal
Panel
ScopedAnchor Section
点击导航后只滚动局部面板。
不会污染页面 hash 路由。
可关闭 affix,让导航留在布局流中。
Module C
Delivery Notes
同一套 items 可以同时服务桌面右侧导航和移动端顶部锚点条。
Signal
Stable
ReuseAnchor Section
适合在复杂后台页中复用。
结构清晰时滚动命中更稳定。
推荐结合语义化 section id。
# 横向模式与高亮映射
顶部锚点条更适合章节较少的页面,同时可以用 getCurrentAnchor 归并多个小节。
Flow 01
Kickoff
先建立整体范围,再决定哪些区块要合并成同一个高亮入口。
Signal
Top Bar
HorizontalAnchor Section
横向模式更适合章节较少的页面。
适合和内容页头一起展示。
高亮映射可用于把多个子段落归并。
Flow 02
Schema
这里开始进入实现细节,补充的 Schema Notes 小节不会单独占一个顶部入口。
Signal
Merged
MappingAnchor Section
`getCurrentAnchor` 接收滚动命中的基础 href。
可以把多个实际 section 映射到同一个展示入口。
用于简化顶部导航颗粒度。
Flow 02B
Schema Notes
这个补充段不出现在顶部导航里,但滚动进入它时仍然使用 Schema 的高亮。
Signal
Carry
AliasAnchor Section
适合把补充说明、FAQ、边界条件并回父级入口。
不会额外占一个横向导航位。
点击其他可见导航项时,active 仍然命中各自本身。
Flow 03
Adapter
第三项保持独立入口,点击后会命中自身,不再被错误归并到前一个导航项。
Signal
Direct
StableAnchor Section
适合承接真正需要独立定位的章节。
与上一个补充小节的高亮归并互不冲突。
更符合顶部导航的点击预期。
Flow 04
Handoff
尾段保持独立高亮,让读者知道自己已经进入交付与收口阶段。
Signal
Final
FinishAnchor Section
横向模式默认只展示单层 items。
点击后仍然走同一套滚动逻辑。
视觉上更接近标签导航而不是侧栏目录。
API
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
items | 主推荐入口。每项支持 href、title、description、disabled 与 children。 | AnchorItem[] | [] |
direction | 导航方向,支持 vertical 与 horizontal。 | 'vertical' | 'horizontal' | vertical |
affix / offsetTop | 是否吸附以及吸附偏移,Rue 实现用 sticky 语义实现。 | boolean / number | true / 0 |
getContainer / targetOffset | 指定滚动容器,并控制点击滚动时的目标偏移。 | () => HTMLElement | Window / number | window / offsetTop |
bounds | 滚动命中的容差,避免边界抖动。 | number | 5 |
getCurrentAnchor | 将实际命中的 href 映射成展示高亮 href,适合章节归并。 | (activeLink: string) => string | - |
onChange / onClick | 分别监听激活项变化和条目点击。 | (href: string) => void / (event, link) => void | - |
classNames / styles | 对 root、list、item、link、title、description、indicator 进行语义化定制。 | object | - |
children / Anchor.Link | 提供结构化 children 回退;在 Rue 编译参与模式下,增强滚动高亮请优先使用 items。 | any | - |