Anchor

Through the anchor point, you can quickly find the position of the information content on the current page.

Basic Usage

The most basic usage

Horizontal Mode

Horizontally aligned anchors

TIP

Horizontal Mode does not support sub-link slots

Scroll Container

Custom scroll area, use offset props can set anchor scroll offset, listen the link-click event and prevents browser default behavior then it will not change history.

Fixed Top Block
part1
part2
part3

Listening for anchor link change

Underline type

set type="underline" change to underline type

Affix Mode

Use the affix component to fix the anchor point within the page.

Anchor API

Anchor Attributes

PropertyDescriptionTypeDefault
containerscroll container.string | HTMLElement | Window
offsetset the offset of the anchor scroll.number0
boundthe offset of the element starting to trigger the anchor.number15
durationset the scroll duration of the container, in milliseconds.number300
markerwhether to show the marker.booleantrue
typeset Anchor type.enumdefault
directionSet Anchor direction.enumvertical

Anchor Events

NameDescriptionType
changecallback when the step changesFunction
clickTriggered when the user clicks on the linkFunction

Anchor Methods

NameDescriptionType
scrollToManually scroll to the specific position.Function

Anchor Slots

NameDescription
defaultAnchorLink component list
PropertyDescriptionTypeDefault
titlethe text content of the anchor link.string
hrefThe address of the anchor link.string
NameDescription
defaultthe content of the anchor link.
sub-linkslots for child links.

Source

ComponentStyleDocs

Contributors