R
导航ProximitySidebar指针邻近景深阅读定位

邻近侧栏

虚线式滚动侧栏：指针越靠近某一项，它的虚线就越长，形成远近景深。

指针邻近

把指针移到右侧的虚线上：离得越近，那一条越长。距离本身变成了可读的信息。

它比传统的圆点导航更安静，也比单纯的进度条承载更多结构——标题、小节与正文可以有不同的权重。

继续在这个框里滚动，激活的那一条会保持高亮。

子章节

kind 为 subtitle 的章节使用更短的基准长度，于是层级一眼可见，不需要额外的缩进或编号。

所有长度变化都在同一个弹性系统里，所以指针移动时整列会像水波一样响应。

滚动同步

组件会监听最近的滚动容器，用 activeOffset 判定当前章节，滚动时自动更新激活项。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/proximity-sidebar.tsx。

npx shadcn@latest add swamimalode07/rare-ui/proximity-sidebar

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

proximity-sidebar.tsx
import ProximitySidebar from "@/components/ui/proximity-sidebar"


export function Demo() {
  return (
    <div className="relative min-h-[420px]">
      <ProximitySidebar
        side="right"
        activeOffset={120}
        sections={[
          { id: "intro", label: "介绍", kind: "title" },
          { id: "install", label: "安装", kind: "subtitle" },
          { id: "usage", label: "用法", kind: "body" },
        ]}
      />
    </div>
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
sections{ id; label; kind?; level? }[]—章节列表，kind 决定虚线权重。
side"left" | "right"—贴靠哪一侧。
activeOffsetnumber—判定激活章节的偏移量。
classNamestring—额外的外层样式。