Semi Design 锚点组件(Anchor)使用指南
项目地址: https://gitcode.com/gh_mirrors/se/semi-design 什么是锚点组件
锚点组件(Anchor)是一种常见的页面导航辅助工具，它能够快速定位到页面特定位置。在Semi Design中，Anchor组件提供了丰富的定制选项，可以帮助开发者轻松实现页面内部导航功能。
基础用法
组件引入
首先需要引入Anchor组件：
import { Anchor } from '@douyinfe/semi-ui';
基本示例
最简单的Anchor使用方式是创建一个包含多个Link的导航列表：
<Anchor>
<Anchor.Link href="#基本示例" title="基本示例" />
<Anchor.Link href="#组件" title="组件" />
<Anchor.Link href="#设计语言" title="设计语言" />
</Anchor>
每个Link的href属性对应页面中元素的id，点击时会平滑滚动到对应位置。
高级功能
容器与定位控制
Anchor组件提供了多种定位和容器控制选项：
- 滚动容器：通过
getContainer可以设置滚动内容的容器，默认为window对象 - 偏移距离：
offsetTop设置触发Link切换的偏移量 - 目标偏移：
targetOffset设置滚动结束后锚点距离顶部的距离 - 自定义样式：通过
style对象可以完全控制Anchor的定位方式
<Anchor
getContainer={() => document.querySelector('.content-container')}
offsetTop={100}
targetOffset={100}
style={{ position: 'fixed', right: '20px', top: '100px' }}
>
{/* Links */}
</Anchor>
尺寸控制
Anchor组件提供两种尺寸选择：
default：默认尺寸small：紧凑尺寸
<Anchor size="small">
{/* 小型锚点链接 */}
</Anchor>
滑轨主题
滑轨(rail)是Anchor组件左侧的指示条，支持三种主题色：
primary：主色(默认)tertiary：第三色muted：柔和色
<Anchor railTheme="tertiary">
{/* 链接列表 */}
</Anchor>
动态展示
通过autoCollapse属性可以控制子级锚点的显示方式：
true：自动折叠，只显示当前激活的部分false：始终显示所有层级(默认)
<Anchor autoCollapse={true}>
<Anchor.Link href="#父级" title="父级">
<Anchor.Link href="#子级1" title="子级1" />
<Anchor.Link href="#子级2" title="子级2" />
</Anchor.Link>
</Anchor>
工具提示
当链接文字过长时，可以启用工具提示功能：
- 基本工具提示：
showTooltip={true} - 自定义位置：通过
position设置提示位置
<Anchor
showTooltip={true}
position="right"
>
<Anchor.Link href="#长标题" title="这是一个非常非常长的锚点标题" />
</Anchor>
API详解
Anchor Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| autoCollapse | 是否自动折叠子锚点 | boolean | false |
| getContainer | 滚动容器获取函数 | () => HTMLElement | window |
| offsetTop | 触发偏移量 | number | 0 |
| railTheme | 滑轨主题 | 'primary'|'tertiary'|'muted' | 'primary' |
| size | 尺寸 | 'small'|'default' | 'default' |
| targetOffset | 目标偏移量 | number | 0 |
| showTooltip | 是否显示工具提示 | boolean | false |
Anchor.Link Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| href | 目标锚点ID | string | - |
| title | 显示文本 | string|ReactNode | - |
| disabled | 是否禁用 | boolean | false |
最佳实践
- 文案规范：保持锚点标题简洁明了，使用句子大小写
- 层级控制：合理组织锚点层级，避免嵌套过深
- 响应式考虑：在小屏幕设备上考虑使用更紧凑的布局
- 性能优化：对于长文档，考虑使用虚拟滚动技术
常见问题
Q: 锚点点击后没有高亮效果？
A: 请检查：
- 目标元素是否存在且具有正确的id
- 滚动容器设置是否正确
- 是否在正确的滚动范围内
Q: 如何实现固定位置的锚点导航？
A: 使用style属性设置固定定位，并确保getContainer指向正确的滚动容器：
<Anchor
style={{ position: 'fixed', right: 20, top: 100 }}
getContainer={() => document.querySelector('.main-content')}
>
{/* 链接 */}
</Anchor>
通过掌握这些功能和技巧，你可以利用Semi Design的Anchor组件为长文档或复杂页面创建高效、美观的导航系统。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
