Anchor
锚点导航，垂直链接列表。组合式 API：children + <Anchor.Link>（对齐 Semi，无 links 数组 prop）。支持 scroll-spy 激活高亮、点击平滑滚动、滑轨条随激活项定位、自定义滚动容器、多级嵌套、文字缩略 Tooltip、autoCollapse 动态展开。
如何引入
import { Anchor, Anchor.Link } from '@chenzy-design/svelte';基本示例
用 <Anchor.Link> 创建锚点，点击跳转到指定位置（对齐 Semi）
基本示例
组件
设计语言
物料平台
主题商店
综合使用
getContainer + offsetTop + targetOffset + 嵌套子链接，开箱即用的目录导航（对齐 Semi）
综合使用
尺寸
滑轨主题
动态展示
API 参考
Anchor
Anchor.Link
尺寸 default
size="default"（默认尺寸）
尺寸 small
size="small" 紧凑锚点
滑轨主题 primary
railTheme="primary"（默认）
滑轨主题 tertiary
railTheme="tertiary"
滑轨主题 muted
railTheme="muted" 隐藏滑轨
动态展示 autoCollapse
autoCollapse=true：滚动时仅展开激活路径的子级、折叠其它（对齐 Semi）
1. 动态展示
1.1 组件
1.1.1 Avatar
1.1.3 Icon
1.2 物料
1.3 主题商店
2. 设计语言
动态展示 autoCollapse=false
autoCollapse=false（默认）：始终全展开（对齐 Semi）
1. 动态展示
1.1 组件
1.1.1 Avatar
1.1.3 Icon
1.2 物料
1.3 主题商店
2. 设计语言
显示工具提示
showTooltip：Link 超出 maxWidth 时 hover 显示完整文字（对齐 Semi）
工具提示位置
position 设置 Tooltip 显示位置，仅 showTooltip=true 时生效（对齐 Semi）
API 参考
Anchor
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
autoCollapse | 滚动时动态展示下一级锚点（对齐 Semi）；默认全展开 | boolean | false |
class | 根类名（对齐 Semi className） | string | undefined |
defaultAnchor | 默认高亮锚点 href（对齐 Semi defaultAnchor 1.20.0） | string | '' |
getContainer | 指定滚动容器（对齐 Semi）；缺省 window | () => HTMLElement | Window | null | window |
maxHeight | 组件 max-height，超出滚动（数字转 px，对齐 Semi） | string | number | '750px' |
maxWidth | 组件 max-width，超出 ellipsis（数字转 px，对齐 Semi） | string | number | '200px' |
offsetTop | 滚动偏移触发 Link 切换（对齐 Semi） | number | 0 |
position | Tooltip 显示位置；仅 showTooltip 时生效（对齐 Semi） | Placement | undefined |
railTheme | 滑轨主题色（对齐 Semi）；muted 隐藏滑轨 | 'primary' | 'tertiary' | 'muted' | 'primary' |
scrollMotion | 是否开启滚动动画（对齐 Semi）；reduced-motion 下强制即时 | boolean | false |
showTooltip | 文字缩略时显示 Tooltip 及配置（对齐 Semi 2.36.0 object 形式） | boolean | { type: 'tooltip' | 'popover'; opts?: Record<string, unknown> } | false |
size | 锚点尺寸（对齐 Semi） | 'small' | 'default' | 'default' |
style | 根节点自定义内联样式（对齐 Semi） | string | undefined |
targetOffset | 锚点滚动时距顶部偏移量（对齐 Semi 1.9.0） | number | 0 |
onChange | 改变锚点回调（对齐 Semi：href 字符串） | (currentLink: string, previousLink: string) => void | undefined |
onClick | 点击锚点回调（对齐 Semi：event + href 字符串） | (event: MouseEvent, currentLink: string) => void | undefined |
aria-label | 根 nav aria-label（缺省走 locale） | string | undefined |
Anchor.Link
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
href | 跳转链接，形如 '#section-1'（对齐 Semi） | string | — |
title | 文字内容（对齐 Semi） | string | — |
disabled | 禁用，不响应点击跳转（对齐 Semi 1.20.0） | boolean | false |
class | 类名（对齐 Semi className） | string | undefined |
style | 样式（对齐 Semi） | string | undefined |
Accessibility
| ARIA role | navigation |
| 键盘交互 | TabArrowUpArrowDownHomeEndSpace |
- nav[role=navigation][aria-label] 包裹链接列表；链接 role=link，激活链接 aria-current=location
- 键盘：Tab 进入链接列表（roving，单一 Tab 停靠点）；↑/↓ 移动焦点；Home/End 跳首/末；Space 激活并滚动
- disabled 链接 aria-disabled=true 且从 roving 序列移除
- scroll-spy 命令式监听 scroll（getContainer 时监听容器），rAF 节流，reduced-motion 下点击即时定位
- 滑轨条据激活链接标题 offsetTop 绝对定位（对齐 Semi _setActiveSlide）
- 多级嵌套用嵌套 Anchor.Link 表达层级树；扁平化树参与 scroll-spy，父子链接均可聚焦/跳转/高亮
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-color-anchor-slide-default-bg-default | var(--cd-color-border) | 滑轨背景颜色 |
--cd-color-anchor-slide-muted-bg-active | var(--cd-color-white) | 选中颜色 - Muted |
--cd-color-anchor-slide-primary-bg-active | var(--cd-color-primary) | 选中颜色 - Primary |
--cd-color-anchor-slide-tertiary-bg-active | var(--cd-color-tertiary) | 选中颜色 - Tietrary |
--cd-color-anchor-title-active-text-hover | var(--cd-color-anchor-title-text-hover) | 文字颜色 - 选中悬浮态 |
--cd-color-anchor-title-bg-active | transparent | 背景色 - 选中 |
--cd-color-anchor-title-bg-default | transparent | 背景色 |
--cd-color-anchor-title-outline-focus | var(--cd-color-primary-light-active) | 轮廓 - 聚焦 |
--cd-color-anchor-title-text-active | var(--cd-color-text-0) | 文字颜色 - 选中 |
--cd-color-anchor-title-text-default | var(--cd-color-text-2) | 文字颜色 - 未选中 |