Importimport { Anchor } from "antd"; |
Docs |
contributors
Importimport { Anchor } from "antd"; |
Docs |
For displaying anchor hyperlinks on page and jumping between them.
Notes for developers
After version
4.24.0, we rewrite Anchor use FC, Some methods of obtainingrefand calling internal instance methods will invalid.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| affix | Fixed mode of Anchor | boolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'> | true | object: 5.19.0 |
| bounds | Bounding distance of anchor area | number | 5 | |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, string> | (info: { props })=> Record<SemanticDOM, string> | - | |
| getContainer | Scrolling container | () => HTMLElement | () => window | |
| getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-square when affix={false} | boolean | false | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<SemanticDOM, CSSProperties> | (info: { props })=> Record<SemanticDOM, CSSProperties> | - | |
| targetOffset | Anchor scroll offset, default as offsetTop, example | number | - | |
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | ||
| onClick | Set the handler to handle click event | (e: MouseEvent, link: object) => void | - | |
| items | Data configuration option content, support nesting through children | { key, href, title, target, children }[] see | - | 5.1.0 |
| direction | Set Anchor direction | vertical | horizontal | vertical | 5.2.0 |
| replace | Replace items' href in browser history instead of pushing it | boolean | false | 5.7.0 |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| key | The unique identifier of the Anchor Link | string | number | - | |
| href | The target of hyperlink | string | ||
| target | Specifies where to display the linked URL | string | ||
| title | The content of hyperlink | ReactNode | ||
| children | Nested Anchor Link, Attention: This attribute does not support horizontal orientation | AnchorItem[] | - | |
| replace | Replace item href in browser history instead of pushing it | boolean | false | 5.7.0 |
We recommend using the items form instead.
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| href | The target of hyperlink | string | ||
| target | Specifies where to display the linked URL | string | ||
| title | The content of hyperlink | ReactNode |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| linkPaddingBlock | Vertical padding of link | number | 4 |
| linkPaddingInlineStart | Horizontal padding of link | number | 16 |
5.25.0+, the :target pseudo-class of the destination element does not take effect as expected after anchor navigation.For the purpose of page performance optimization, the implementation of anchor navigation has been changed from window.location.href to window.history.pushState/replaceState. Since pushState/replaceState does not trigger a page reload, the browser will not automatically update the matching state of the :target pseudo-class. To resolve this issue, you can manually construct the full URL: href = window.location.origin + window.location.pathname + '#xxx'.