Importimport { Anchor } from 'antd'; |
contributors
Importimport { Anchor } from 'antd'; |
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 |
| targetOffset | Customize scroll offset for this anchor link. It takes precedence over the targetOffset prop of the Anchor component | number | - | 6.4.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 | ||
| targetOffset | Customize scroll offset for this anchor link. It takes precedence over the targetOffset prop of the Anchor component | number | - | 6.4.0 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| linkPaddingBlock | Vertical padding of link | number | 4 |
| linkPaddingInlineStart | Horizontal padding of link | number | 16 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorPrimary | Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics. | string | #1677ff |
| colorSplit | Used as the color of separator, this color is the same as colorBorderSecondary but with transparency. | string | rgba(5,5,5,0.06) |
| colorText | Default text color which comply with W3C standards, and this color is also the darkest neutral color. | string | rgba(0,0,0,0.88) |
| fontFamily | The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics. | string | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
| fontSize | The most widely used font size in the design system, from which the text gradient will be derived. | number | 14 |
| fontSizeLG | Large font size | number | 16 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineType | Border style of base components | string | solid |
| lineWidth | Border width of base components | number | 1 |
| lineWidthBold | The default line width of the outline class components, such as Button, Input, Select, etc. | number | 2 |
| motionDurationSlow | Motion speed, slow speed. Used for large element animation interaction. | string | 0.3s |
| paddingXXS | Control the extra extra small padding of the element. | number | 4 |
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'.