R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

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 / numbertrue / 0
        getContainer / targetOffset指定滚动容器,并控制点击滚动时的目标偏移。() => HTMLElement | Window / numberwindow / offsetTop
        bounds滚动命中的容差,避免边界抖动。number5
        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-
        页内导航
        页内导航
        文档
        • 深度指南
        • 实战例子
        • 快速上手
        • 术语表
        • 错误码参照表
        关于
        • 常见问题
        • 团队
        • 版本发布
        • 社区指南
        生态
        • 插件
        • 组件库
        • 路由指南
        • Text.js
        © 2024-2026 Xiangmin Liu
        Rue.JS