mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-30 04:18:28 +08:00
38cf5e8a75
* docs: unify component export file as index.tsx * docs: compatible with old anchors * chore: clean * test: update snapshot * fix: window env --------- Co-authored-by: Peach <scdzwyxst@gmail.com>
3.8 KiB
3.8 KiB
category | title | description | cover | coverDark | demo | group | ||||
---|---|---|---|---|---|---|---|---|---|---|
Components | Anchor | Hyperlinks to scroll on one page. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original |
|
When To Use
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 obtainingref
and calling internal instance methods will invalid.
Examples
Basic
Horizontal Anchor
Static Anchor
Customize the onClick event
Customize the anchor highlight
Set Anchor scroll offset
Listening for anchor link change
Replace href in history
Deprecated JSX demo
Component Token
API
Common props ref:Common props
Anchor 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 | |
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 | |
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 |
AnchorItem
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 |
Link Props
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 |