ant-design/components/anchor/index.en-US.md
MadCcc 4ecc0d7f95
docs: optimize overview svg (#47203)
* docs: optimize overview svg

* docs: update

* docs: dark
2024-01-29 14:50:36 +08:00

3.7 KiB
Raw Blame History

category title 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
Navigation 3

Hyperlinks to scroll on one page.

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 obtaining ref 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 refCommon props

Anchor Props

Property Description Type Default Version
affix Fixed mode of Anchor boolean true
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

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

Design Token