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
export function AnchorBasic() { return ( <ElAnchor className={styles.anchor} offset={70}> <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink> <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink> <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink> <ElAnchorLink href="#anchor-api" subLink={ <> <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink> <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink> </> } > Anchor API </ElAnchorLink> </ElAnchor> ); } Horizontal Mode
Horizontally aligned anchors
Horizontal Mode does not support sub-link slots
export function AnchorHorizontal() { return ( <ElAnchor className={styles.anchor} offset={70} direction="horizontal"> <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink> <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink> <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink> </ElAnchor> ); } 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.
export function AnchorScroll() { const [containerEl, setContainerEl] = useState<HTMLDivElement | null>(null); return ( <div> <ElRow className={styles.scrollRow}> <ElCol span={18}> <div style={{ height: 30, width: "70%", background: "#000", position: "absolute", top: 0, left: 0, color: "#fff", }} > Fixed Top Block </div> <div ref={setContainerEl} style={{ height: 300, overflowY: "auto" }}> <div id="part1" style={{ height: 300, background: "rgba(255, 0, 0, 0.02)", marginTop: 30, }} > part1 </div> <div id="part2" style={{ height: 300, background: "rgba(0, 255, 0, 0.02)", marginTop: 30, }} > part2 </div> <div id="part3" style={{ height: 300, background: "rgba(0, 0, 255, 0.02)", marginTop: 30, }} > part3 </div> </div> </ElCol> <ElCol span={6}> <div className="vp-raw"> <ElAnchor className={styles.anchor} container={containerEl} direction="vertical" type="default" offset={30} onClick={(event) => event.preventDefault()} > <ElAnchorLink href="#part1" title="part1" /> <ElAnchorLink href="#part2" title="part2" /> <ElAnchorLink href="#part3" title="part3" /> </ElAnchor> </div> </ElCol> </ElRow> </div> ); } Anchor link change
Listening for anchor link change
export function AnchorChange() { return ( <ElAnchor className={styles.anchor} offset={70} onChange={(href) => { console.log("anchor change:", href); }} > <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink> <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink> <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink> <ElAnchorLink href="#anchor-api" subLink={ <> <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink> <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink> </> } > Anchor API </ElAnchorLink> </ElAnchor> ); } Underline type
set type="underline" change to underline type
export function AnchorUnderline() { return ( <ElAnchor className={styles.anchor} type="underline" offset={70}> <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink> <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink> <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink> <ElAnchorLink href="#anchor-api" subLink={ <> <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink> <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink> </> } > Anchor API </ElAnchorLink> </ElAnchor> ); } Affix Mode
Use the affix component to fix the anchor point within the page.
export function AnchorAffix() { return ( <ElAffix offset={60}> <ElAnchor className={styles.anchor} offset={70} style={{ width: 300 }} > <ElAnchorLink href="#基础用法">基础用法</ElAnchorLink> <ElAnchorLink href="#水平模式">水平模式</ElAnchorLink> <ElAnchorLink href="#滚动容器">滚动容器</ElAnchorLink> <ElAnchorLink href="#anchor-api" subLink={ <> <ElAnchorLink href="#anchor-attributes">Anchor Attributes</ElAnchorLink> <ElAnchorLink href="#anchor-events">Anchor Events</ElAnchorLink> </> } > Anchor API </ElAnchorLink> </ElAnchor> </ElAffix> ); } Anchor API
Anchor Attributes
Property Description Type Default container Scroll container. string | HTMLElement | Window— offset Set the offset of the anchor scroll. number0 bound The offset of the element starting to trigger the anchor. number15 duration Set the scroll duration of the container, in milliseconds. number300 marker Whether to show the marker. booleantrue type Set Anchor type. enumdefaultdirection Set Anchor direction. enumverticalselect-scroll-top 2.9.2 Scroll whether link is selected at the top booleanfalse
Anchor Events
Name Description Type change Callback when the step changes Functionclick Triggered when the user clicks on the link Function
Anchor Exposes
Name Description Type scrollTo Manually scroll to the specific position. Function
Anchor Slots
Name Description default AnchorLink component list
AnchorLink Attributes
Property Description Type Default title The text content of the anchor link. string— href The address of the anchor link. string—
AnchorLink Slots
Name Description default The content of the anchor link. sub-link Slots for child links.
