使用import { Anchor } from 'antd'; |
文档贡献者
需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
开发者注意事项：
自
4.24.0起，由于组件从 class 重构成 FC，之前一些获取ref并调用内部实例方法的写法都会失效
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| affix | 固定模式 | boolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'> | true | object: 5.19.0 |
| bounds | 锚点区域边界 | number | 5 | |
| classNames | 用于自定义组件内部各语义化结构的 class，支持对象或函数 | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | ||
| showInkInFixed | affix={false} 时是否显示小方块 | boolean | false | |
| styles | 用于自定义组件内部各语义化结构的行内 style，支持对象或函数 | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，例子 | number | - | |
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
| onClick | click 事件的 handler | (e: MouseEvent, link: object) => void | - | |
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] 具体见 | - | 5.1.0 |
| direction | 设置导航方向 | vertical | horizontal | vertical | 5.2.0 |
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| key | 唯一标志 | string | number | - | |
| href | 锚点链接 | string | - | |
| target | 该属性指定在何处显示链接的资源 | string | - | |
| title | 文字内容 | ReactNode | - | |
| children | 嵌套的 Anchor Link，注意：水平方向该属性不支持 | AnchorItem[] | - | |
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
| targetOffset | 设置单个锚点的滚动偏移量，会覆盖 Anchor 组件的 targetOffset 属性 | number | - | 6.4.0 |
建议使用 items 形式。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| href | 锚点链接 | string | - | |
| target | 该属性指定在何处显示链接的资源 | string | - | |
| title | 文字内容 | ReactNode | - | |
| targetOffset | 设置单个锚点的滚动偏移量，会覆盖 Anchor 组件的 targetOffset 属性 | number | - | 6.4.0 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| linkPaddingBlock | 链接纵向内间距 | number | 4 |
| linkPaddingInlineStart | 链接横向内间距 | number | 16 |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| colorPrimary | 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义 | string | #1677ff |
| colorSplit | 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。 | string | rgba(5,5,5,0.06) |
| colorText | 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。 | string | rgba(0,0,0,0.88) |
| fontFamily | Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。 | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。 | number | 14 |
| fontSizeLG | 大号字体大小 | number | 16 |
| lineHeight | 文本行高 | number | 1.5714285714285714 |
| lineType | 用于控制组件边框、分割线等的样式，默认是实线 | string | solid |
| lineWidth | 用于控制组件边框、分割线等的宽度 | number | 1 |
| lineWidthBold | 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。 | number | 2 |
| motionDurationSlow | 动效播放速度，慢速。用于大型元素如面板动画交互 | string | 0.3s |
| paddingXXS | 控制元素的极小内间距。 | number | 4 |
5.25.0+ 版本中，锚点跳转后，目标元素的 :target 伪类未按预期生效出于页面性能优化考虑，锚点跳转的实现方式从 window.location.href 调整为 window.history.pushState/replaceState。由于 pushState/replaceState 不会触发页面重载，因此浏览器不会自动更新 :target 伪类的匹配状态。可以手动构造完整URL：href = window.location.origin + window.location.pathname + '#xxx' 来解决这问题。