vuecssuiant-designantdreactantantd-vueenterprisefrontendui-designvue-antdvue-antd-uivue3vuecomponent
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2.9 KiB
2.9 KiB
category | type | cols | title | cover | coverDark |
---|---|---|---|---|---|
Components | Navigation | 1 | Anchor | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JGb3RIzyOCkAAAAAAAAAAAAADrJ8AQ/original |
Hyperlinks to scroll on one page.
When To Use
For displaying anchor hyperlinks on page and jumping between them.
API
Anchor Props
Property | Description | Type | Default | Version |
---|---|---|---|---|
affix | Fixed mode of Anchor | boolean | true | |
bounds | Bounding distance of anchor area | number | 5(px) | |
getContainer | Scrolling container | () => HTMLElement | () => window | |
getCurrentAnchor | Customize the anchor highlight | (activeLink: string) => string | - | activeLink(3.3) |
offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
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 | offsetTop |
1.5.0 |
wrapperClass | The class name of the container | string | - | |
wrapperStyle | The style of the container | object | - | |
items | Data configuration option content, support nesting through children | { key, href, title, target, children }[] see | - | 4.0 |
direction | Set Anchor direction | vertical | horizontal |
vertical |
4.0 |
customTitle | custom option title by slot | v-slot="AnchorItem" | - | 4.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 | VueNode | (item: AnchorItem) => VueNode | ||
children | Nested Anchor Link, Attention: This attribute does not support horizontal orientation |
AnchorItem[] | - |
Events
Events Name | Description | Arguments | Version | |
---|---|---|---|---|
change | Listening for anchor link change | (currentActiveLink: string) => void | 1.5.0 | |
click | set the handler to handle click event |
Function(e: MouseEvent, link: Object) |
Link Props
Property | Description | Type | Default | Version |
---|---|---|---|---|
href | target of hyperlink | string | ||
target | Specifies where to display the linked URL | string | 1.5.0 | |
title | content of hyperlink | string|slot |