🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
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

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)
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