Anchor 设计文档
锚点导航,垂直链接列表。组合式 API:children + <Anchor.Link>(对齐 Semi,无 links 数组 prop)。支持 scroll-spy 激活高亮、点击平滑滚动、滑轨条随激活项定位、自定义滚动容器、多级嵌套、文字缩略 Tooltip、autoCollapse 动态展开。
← API 文档使用建议
锚点导航,垂直链接列表。组合式 API:children + <Anchor.Link>(对齐 Semi,无 links 数组 prop)。支持 scroll-spy 激活高亮、点击平滑滚动、滑轨条随激活项定位、自定义滚动容器、多级嵌套、文字缩略 Tooltip、autoCollapse 动态展开。
Accessibility
ARIA role:navigation
- 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-transform-scale-anchor-title-text | var(--cd-motion-scale-none) | 锚点-放大 |
| --cd-transition-delay-anchor-title-text | var(--cd-motion-duration-none) | 锚点标题文字-文字-延迟时间 |
| --cd-transition-duration-anchor-title-text | var(--cd-motion-duration-none) | 锚点标题文字-文字-动画持续时间 |
| --cd-transition-function-anchor-title-text | var(--cd-motion-ease-in) | 锚点标题文字-文字-过渡曲线 |
显示第 1 条-第 4 条,共 4 条
- 1