You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

3.1 KiB

category title subtitle cover coverDark demo group
Components Anchor 锚点 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original <nil> [{title 导航} {order 3}]

用于跳转到页面指定位置。

何时使用

需要展现当前页面上可供跳转的锚点链接,以及快速在锚点之间跳转。

开发者注意事项:

4.24.0 起,由于组件从 class 重构成 FC,之前一些获取 ref 并调用内部实例方法的写法都会失效

代码演示

基本 横向 Anchor 静态位置 自定义 onClick 事件 自定义锚点高亮 设置锚点滚动偏移量 监听锚点链接改变 废弃的 JSX 示例

API

Anchor Props

参数 说明 类型 默认值 版本
affix 固定模式 boolean true
bounds 锚点区域边界 number 5
getContainer 指定滚动的容器 () => HTMLElement () => window
getCurrentAnchor 自定义高亮的锚点 (activeLink: string) => string -
offsetTop 距离窗口顶部达到指定偏移量后触发 number
showInkInFixed affix={false} 时是否显示小方块 boolean false
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

AnchorItem

参数 说明 类型 默认值 版本
key 唯一标志 string | number -
href 锚点链接 string -
target 该属性指定在何处显示链接的资源 string -
title 文字内容 ReactNode -
children 嵌套的 Anchor Link,注意:水平方向该属性不支持 AnchorItem[] -

建议使用 items 形式。

参数 说明 类型 默认值 版本
href 锚点链接 string -
target 该属性指定在何处显示链接的资源 string -
title 文字内容 ReactNode -

Design Token