Navigation · Anchor
Anchor
The Anchor component is used to create a hyper Link navigation bar.

Demos

How to import

Basic Usage

Use Link to create an anchor, click it to jump to the hash tag location.

Integrated Usage

You can use getContainer, targetOffset, offsetTop, and style to create a out of the box hyperAnchor.Link navigation bar.
  • getContainer:you can set the container of scroll content with getContainer property. Its default value is window.
  • targetOffset: you can set the distance between the anchor point and the top of the container by setting targetOffset. v>=1.9
  • style:the default position of Anchor is relative. You can customize it with style object.
  • offsetTop:offsetTop can trigger the current Link switch when the scrolling content reaches a specified offset from the top of the container.

Size

You can change Anchor size with size property.

Rail Theme

You can change rail color with railTheme property. Three themes are supported and the default value is primary.

Auto Collapse

Anchor can dynamically display child links with autoCollapse property. The default is false.

Show Tooltip

showTooltip can display the title of link when it exceeds the max-width. The default value is false.

Tooltip Position

You can change the Tooltip position with position property. It only works when showTooltip is true.

API Reference

Anchor

PROPERTIESINSTRUCTIONSTYPEDEFAULTVERSION
autoCollapseDynamically display child linkbooleanfalse
classNameClass namestring-
defaultAnchorDefault highlight anchorstring-1.20.0
getContainerScroll container() => HTMLElementwindow
maxHeightmax-height of Anchorstring | number750px
maxWidthmax-width of Anchorstring | number200px
offsetTopTrigger the current link switch when the scrolling content reaches a specified offset from the top of the containernumber0
onChangeChange event(currentLink, previousLink) => void-
onClickClick event(event, currentLink) => void-
positionTooltip position,same as position property of Tooltip componentstring-
railThemeStyle of scroll rail,one of primarytertiarymutedstringprimary
scrollMotionAnimation of scroll behaviorbooleanfalse
showTooltipShow Tooltipbooleanfalse
sizeSize of Anchor,one of smalldefaultstringdefault
styleStyle objectobject-
targetOffsetAnchor offset from top of targetnumber01.9.0
PROPERTIESINSTRUCTIONSTYPEDEFAULT
classNameClass namestring-
hrefThe target of hyper linkstring-
styleStyle objectobject-
titleThe content of hyper linkstring|ReactNode-

Content Guidelines

  • Write in sentence case
  • Keep it concise and avoid line breaks

Design Tokens

FAQ

  1. Why didn't my link highlight and slide to follow?
    Check whether you can scroll to the specified position by clicking the anchor:
    • No, it means there is a problem with the id. check whether the id exists in the document;
    • Yes, it may be that the scrolling container is not set correctly to ensure that the content of the document is wrapped in the scrolling container. The default scrolling container is window. If your container is a div of .my-container, you should set the scrolling container to this div.

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED