导航类 · Anchor
锚点
创建超链接导航栏。

代码演示

如何引入

基本示例

使用 Link 可以创建锚点,点击它会跳转到指定位置。

综合使用

你可以搭配 getContainertargetOffsetstyleoffsetTop 完成一个拆箱即用的超链接导航栏。
  • 滚动容器:你可以通过 getContainer 设置滚动内容的容器,默认值为 window 。
  • 距离顶部的距离:可以通过设置 targetOffset 设置文档滚动结束时,锚点距离容器顶部的距离。v>=1.9
  • 自定义定位方式:Anchor 的默认定位方式为 relative,你可以通过 style 对象自定义它的定位方式。
  • 偏移距离:offsetTop 可以在滚动内容距离容器顶部达到指定偏移量时触发当前 Link 切换。

尺寸

Anchor 设置 size 可以控制锚点的尺寸。

滑轨主题

Anchor 设置 railTheme 可以控制滑轨的主题色。默认值为 primary

动态展示

Anchor 设置 autoCollapse 可以动态展示下一级锚点。默认值为 false

显示工具提示

Anchor 设置 showTooltip 可以在 Link 超出最大宽度时显示 Link 的文字内容。默认值为 false

工具提示位置

Anchor 设置 position 可以设置Tooltip的显示位置。它仅在 showTooltiptrue 时起作用。

API 参考

Anchor

属性说明类型默认值版本
autoCollapse滚动时动态显示下一级锚点booleanfalse
className类名string-
defaultAnchor默认高亮锚点string-1.20.0
getContainer指定滚动的容器() => HTMLElementwindow
maxHeight组件的 max-height,超出时显示滚动条string | number750px
maxWidth组件的 max-width,超出时显示...string | number200px
offsetTop滚动内容距离容器顶部达到指定偏移量时触发number0
onChange改变锚点的回调函数(currentLink, previousLink) => void-
onClick点击锚点回调函数(event, currentLink) => void-
positionTooltip 显示位置,可选值同 Tooltip 组件 positionstring-
railTheme滑轨主题,可选值:primarytertiarymutedstringprimary
scrollMotion是否开启滚动动画booleanfalse
showTooltip文字缩略时是否显示 Tooltipbooleanfalse
size锚点尺寸,可选值: smalldefaultstringdefault
style样式对象object-
targetOffset锚点滚动时距离顶部偏移量number01.9.0
属性说明类型默认值版本
className类名string-
disabled禁用,不响应点击跳转booleanfalse1.20.0
href跳转的链接string-
style样式对象object-
title文字内容string|ReactNode-

设计变量

FAQ

  1. 为何我的 Link 没有高亮和滑动跟随?
    检查下点击锚点是否可以滚动到指定位置:
    • 不可以,说明 href 有问题,检查文档中是否存在该 id;
    • 可以,可能是滚动容器设置不正确,确保文档内容被包裹在滚动容器内。滚动容器默认为 window,如果你的容器是 .my-container 的 div,则应该将滚动容器设置为该 div。

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED