Home Explore Help
Register Sign In
Apq
/
semi-design
mirror of https://github.com/DouyinFE/semi-design.git
1
0
Fork 0
Files Issues 0 Wiki
Tree: 8946ef6145
Branches Tags
semi-design
/
content
/
navigation
/
anchor
/
index.md

index.md 15 KB
History Raw

localeCode: zh-CN order: 43 category: 导航类 title: Anchor 锚点 icon: doc-anchor

brief: 创建超链接导航栏。

代码演示

如何引入

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

基本示例

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

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

() => (
    <Anchor>
        <Anchor.Link href="#基本示例" title="基本示例" />
        <Anchor.Link href="#组件" title="组件" />
        <Anchor.Link href="#设计语言" title="设计语言" />
        <Anchor.Link href="#物料平台" title="物料平台" />
        <Anchor.Link href="#主题商店" title="主题商店" />
    </Anchor>  
);

综合使用

你可以搭配 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 可以控制锚点的尺寸。

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

() => (
    <Anchor size={'default'}>
        <Anchor.Link href="#组件" title="组件" />
        <Anchor.Link href="#设计语言" title="设计语言" />
        <Anchor.Link href="#物料平台" title="物料平台" />
        <Anchor.Link href="#主题商店" title="主题商店" />
    </Anchor>
);

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

() => (
    <Anchor size={'small'}>
        <Anchor.Link href="#组件" title="组件" />
        <Anchor.Link href="#设计语言" title="设计语言" />
        <Anchor.Link href="#物料平台" title="物料平台" />
        <Anchor.Link href="#主题商店" title="主题商店" />
    </Anchor>
);

滑轨主题

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

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                railTheme={'primary'}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}
            >
                <Anchor.Link href="#尺寸" title="尺寸" />
                <Anchor.Link href="#滑轨主题" title="滑轨主题" />
                <Anchor.Link href="#设计语言" title="设计语言" />
                <Anchor.Link href="#物料平台" title="物料平台" />
                <Anchor.Link href="#主题商店" title="主题商店" />
            </Anchor>
        </div>
    );
};

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                railTheme={'tertiary'}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}
            >
                <Anchor.Link href="#尺寸" title="尺寸" />
                <Anchor.Link href="#滑轨主题" title="滑轨主题" />
                <Anchor.Link href="#设计语言" title="设计语言" />
                <Anchor.Link href="#物料平台" title="物料平台" />
                <Anchor.Link href="#主题商店" title="主题商店" />
            </Anchor>
        </div>
    );
};

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                railTheme={'muted'}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}
            >
                <Anchor.Link href="#尺寸" title="尺寸" />
                <Anchor.Link href="#滑轨主题" title="滑轨主题" />
                <Anchor.Link href="#设计语言" title="设计语言" />
                <Anchor.Link href="#物料平台" title="物料平台" />
                <Anchor.Link href="#主题商店" title="主题商店" />
            </Anchor>
        </div>
    );
};

动态展示

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

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                autoCollapse={true}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}>
                <Anchor.Link href="#动态展示" title="1. 动态展示">
                    <Anchor.Link href="#组件" title="1.1 组件">
                        <Anchor.Link href="#头像" title="1.1.1 Avatar" />
                        <Anchor.Link href="#按钮" title="1.1.2 Button" />
                        <Anchor.Link href="#图标" title="1.1.3 Icon" />
                    </Anchor.Link>
                    <Anchor.Link href="#物料" title="1.2 物料" />
                    <Anchor.Link href="#主题商店" title="1.3 主题商店" />
                </Anchor.Link>
                <Anchor.Link href="#设计语言" title="2. 设计语言" />
            </Anchor>
        </div>
    );
};

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                autoCollapse={false}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}>
                <Anchor.Link href="#动态展示" title="1. 动态展示">
                    <Anchor.Link href="#组件" title="1.1 组件">
                        <Anchor.Link href="#头像" title="1.1.1 Avatar" />
                        <Anchor.Link href="#按钮" title="1.1.2 Button" />
                        <Anchor.Link href="#图标" title="1.1.3 Icon" />
                    </Anchor.Link>
                    <Anchor.Link href="#物料" title="1.2 物料" />
                    <Anchor.Link href="#主题商店" title="1.3 主题商店" />
                </Anchor.Link>
                <Anchor.Link href="#设计语言" title="2. 设计语言" />
            </Anchor>
        </div>
    );
};

显示工具提示

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

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                showTooltip={true}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}
            >
                <Anchor.Link href="#显示工具提示" title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。" />
                <Anchor.Link href="#组件" title="组件" />
                <Anchor.Link href="#设计语言" title="设计语言" />
                <Anchor.Link href="#物料平台" title="物料平台" />
                <Anchor.Link href="#主题商店" title="主题商店" />
            </Anchor>
        </div>
    );
};

工具提示位置

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

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

() => {
    const getContainer = () => {
        return document.querySelector('window');
    };
    return (
        <div>
            <Anchor
                showTooltip={true}
                position={'right'}
                getContainer={getContainer}
                targetOffset={60}
                offsetTop={100}
            >
                <Anchor.Link href="#工具提示位置" title="工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。" />
                <Anchor.Link href="#组件" title="组件" />
                <Anchor.Link href="#设计语言" title="设计语言" />
                <Anchor.Link href="#物料平台" title="物料平台" />
                <Anchor.Link href="#主题商店" title="主题商店" />
            </Anchor>
        </div>
    );
};

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

  1. 为何我的 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>
)
}