ant-design/components/anchor/index.zh-CN.md
gin-lsl 5c42cfaa63
feat: Support affix props in Anchor (#49295)
* feat: Support affix props in Anchor

* Update components/anchor/index.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>
Signed-off-by: gin-lsl <gin_lsl@outlook.com>

* docs: update doc

---------

Signed-off-by: gin-lsl <gin_lsl@outlook.com>
Co-authored-by: afc163 <afc163@gmail.com>
2024-06-12 15:00:56 +08:00

3.7 KiB
Raw Blame History

category title subtitle description cover coverDark demo group
Components Anchor 锚点 用于跳转到页面指定位置。 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
title order
导航 3

何时使用

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

开发者注意事项:

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

代码演示

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

API

通用属性参考:通用属性

Anchor Props

参数 说明 类型 默认值 版本
affix 固定模式 boolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'> true object: 5.19.0
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
replace 替换浏览器历史记录中项目的 href 而不是推送它 boolean false 5.7.0

AnchorItem

参数 说明 类型 默认值 版本
key 唯一标志 string | number -
href 锚点链接 string -
target 该属性指定在何处显示链接的资源 string -
title 文字内容 ReactNode -
children 嵌套的 Anchor Link注意:水平方向该属性不支持 AnchorItem[] -
replace 替换浏览器历史记录中的项目 href 而不是推送它 boolean false 5.7.0

建议使用 items 形式。

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

主题变量Design Token