Skip to main content

Anchor 锚点

用于跳转到页面指定位置，需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

引入​

import {Anchor} from 'acud';

基本用法​

<Anchor style={{margin: 'auto', width: 110}}>
    <Anchor.Link href="#基本用法" title="基本用法" />
    <Anchor.Link href="#静态位置" disabled title="静态位置" />
    <Anchor.Link href="#api" title="API">
        <Anchor.Link href="#anchor-props" title="Anchor Props" />
        <Anchor.Link href="#link-props" title="Link Props" />
    </Anchor.Link>
</Anchor>

静态位置​

不浮动，状态不随页面滚动变化。

<Anchor affix={false}>
    <Anchor.Link href="#基本用法" title="基本用法" />
    <Anchor.Link href="#静态位置" title="静态位置" />
    <Anchor.Link href="#api" title="API">
        <Anchor.Link href="#anchor-props" title="Anchor Props" />
        <Anchor.Link href="#link-props" title="Link Props" />
    </Anchor.Link>
</Anchor>

API​

Anchor Props​

成员说明类型默认值
affix固定模式booleantrue
bounds锚点区域边界number5
getContainer指定滚动的容器() => HTMLElement() => window
getCurrentAnchor自定义高亮的锚点() => string--
offsetTop距离窗口顶部达到指定偏移量后触发number0
showInkInFixedaffix={false} 时是否显示小圆点booleanfalse
targetOffset锚点滚动偏移量，默认与 offsetTop 相同number--
onChange监听锚点链接改变(currentActiveLink: string) => void--
onClickclick 事件的 handlerfunction(e: Event, link: Object)--
成员说明类型默认值
href锚点链接string--
target该属性指定在何处显示链接的资源。string--
title文字内容ReactNode--