Anchor 锚点 - Semi Design

代码演示

如何引入


import { Anchor } from '@douyinfe/semi-ui';

基本示例

使用 Link 可以创建锚点，点击它会跳转到指定位置。

综合使用

你可以搭配 getContainer，targetOffset，style，offsetTop 完成一个拆箱即用的超链接导航栏。

滚动容器：你可以通过 getContainer 设置滚动内容的容器，默认值为 window 。
距离顶部的距离：可以通过设置 targetOffset 设置文档滚动结束时，锚点距离容器顶部的距离。v>=1.9
自定义定位方式：Anchor 的默认定位方式为 relative，你可以通过 style 对象自定义它的定位方式。
偏移距离：offsetTop 可以在滚动内容距离容器顶部达到指定偏移量时触发当前 Link 切换。


import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <span>请看右侧固定的 Anchor </span>
            <Anchor
                getContainer={getContainer}
                offsetTop={100}
                targetOffset={100} // v>=1.9
                style={{ position: 'fixed', right: '20px', top: '100px', width: '200px', zIndex: 3 }} >
                <Anchor.Link href="#基本示例" title="我是固定的 Anchor" />
                <Anchor.Link href="#综合使用" title="综合使用" />
                <Anchor.Link href="#尺寸" title="尺寸" />
                <Anchor.Link href="#滑轨主题" title="滑轨主题" />
                <Anchor.Link href="#动态展示" title="动态展示" />
                <Anchor.Link href="#显示工具提示" title="显示工具提示" />
                <Anchor.Link href="#工具提示位置" title="工具提示位置" />
                <Anchor.Link href="#API参考" title="API参考">
                    <Anchor.Link href="#Anchor" title="Anchor" />
                    <Anchor.Link href="#Anchor.Link" title="Anchor.Link" />
                </Anchor.Link>
            </Anchor>
        </div>
    );
};

尺寸

Anchor 设置 size 可以控制锚点的尺寸。

滑轨主题

Anchor 设置 railTheme 可以控制滑轨的主题色。默认值为 primary。

动态展示

Anchor 设置 autoCollapse 可以动态展示下一级锚点。默认值为 false。

显示工具提示

Anchor 设置 showTooltip 可以在 Link 超出最大宽度时显示 Link 的文字内容。默认值为 false, 更多使用参考 API 说明。

工具提示位置

Anchor 设置 position 可以设置Tooltip的显示位置。它仅在 showTooltip 为 true 时起作用。

API 参考

Anchor

属性	说明	类型	默认值	版本
autoCollapse	滚动时动态显示下一级锚点	boolean	false
className	类名	string	-
defaultAnchor	默认高亮锚点	string	-	1.20.0
getContainer	指定滚动的容器	() => HTMLElement	window
maxHeight	组件的 max-height，超出时显示滚动条	string \| number	`750px`
maxWidth	组件的 max-width，超出时显示...	string \| number	`200px`
offsetTop	滚动内容距离容器顶部达到指定偏移量时触发	number	0
onChange	改变锚点的回调函数	(currentLink, previousLink) => void	-
onClick	点击锚点回调函数	(event, currentLink) => void	-
position	Tooltip 显示位置，可选值同 Tooltip 组件 position	string	-
railTheme	滑轨主题，可选值：`primary`，`tertiary`，`muted`	string	`primary`
scrollMotion	是否开启滚动动画	boolean	false
showTooltip	文字缩略时是否显示 Tooltip 及相关配置, type，浮层内容承载的组件，支持 Tooltip（默认） \| Popover；opts，其他需要透传给浮层组件的属性, object 形式设置自 2.36.0 版本提供	boolean \| {type: 'tooltip'\|'popover', opts: object}	false
size	锚点尺寸，可选值： `small`，`default`	string	`default`
style	样式对象	object	-
targetOffset	锚点滚动时距离顶部偏移量	number	0	1.9.0

Anchor.Link

属性	说明	类型	默认值	版本
className	类名	string	-
disabled	禁用，不响应点击跳转	boolean	false	1.20.0
href	跳转的链接	string	-
style	样式对象	object	-
title	文字内容	string\|ReactNode	-

文案规范

按句子大小写书写
保持简洁，避免换行

设计变量

FAQ

为何我的 Link 没有高亮和滑动跟随？
检查下点击锚点是否可以滚动到指定位置：

不可以，说明 href 有问题，检查文档中是否存在该 id；
可以，可能是滚动容器设置不正确，确保文档内容被包裹在滚动容器内。滚动容器默认为 window，如果你的容器是 .my-container 的 div，则应该将滚动容器设置为该 div。


import React from 'react';
import { Anchor } from '@douyinfe/semi-ui';

function() {
    // 此容器不是 Anchor 组件的容器，是文档内容的容器，因为要根据文档容器去计算当前是哪个 id 在容器上方
    const getContainer = () => {
        return document.querySelector('.my-container');
    }
    return (
        <Anchor
            /* 其他属性 */
            getContainer={getContainer}
            >
            /* Links */
        </Anchor>
    )
}