ant-design/components/anchor/index.zh-CN.md
Yuki Zhang 4eff22497d
feat: Anchor horizontal (#39372)
* feat: AnchorInk

* feat: update

* feat: update ink

* test: add test

* feat: handle with nested link

* feat: improve

* fix: lint

* feat: get direction from context in AnchorLink

* docs: update demo

* test: update snapshot

* test: update snapshot

* test: update snapshot

* test: update test cases

* test: update snapshot

* test: update snapshots

* test: update snapshots

* test: update test cases

* test: update test cases

* docs: update

* test: improve

* docs: update demo

* doc: update demos

* doc: update demos again

* feat: use scroll-into-view-if-needed

* fix: hide  scrollbar

* docs: update demos

* fix: active transition for horizontal anchor

* chore: fix terser (#39617)

* chore: fix terser

* chore: clean up

* test: update snapshot

* feat: improve code style

* feat: anchor ink improvement

* feat: improve code style

* fix: lint issue

* test: update snapshots

* docs: simplified the demo

* feat: Merge the AnchorInk component back into the Anchor component

* feat: Adjust DOM order

* test: update snapshots

* docs: Improve the document

* feat: simplify css classnames

* test: update snapshots

Co-authored-by: 二货爱吃白萝卜 <smith3816@gmail.com>
2022-12-27 17:14:35 +08:00

3.0 KiB
Raw Blame History

category title subtitle cover demo group
Components Anchor 锚点 https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
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 -