组件
    切换框架
    ReactVueSolidSvelte
    切换语言
    简体中文English
    GitHub
    导航类

    锚点

    创建超链接导航栏。

    代码演示

    如何引入

    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';
</script>

    没有 Anchor.Link，链接用数据 prop links 传入。

    基本示例

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

    链接写成 links 数组，元素为 { href, title, disabled, children }，children 嵌套下一级；自定义标题用 title snippet，参数 { item, level }。

    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#基本示例', title: '基本示例' },
        { href: '#组件', title: '组件' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<Anchor {links} />

    综合使用

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

    • 滚动容器：你可以通过 getContainer 设置滚动内容的容器，默认值为 window 。

    • 距离顶部的距离：可以通过设置 targetOffset 设置文档滚动结束时，锚点距离容器顶部的距离。

    • 自定义定位方式：Anchor 自身不设置定位，你可以通过 style 对象为它指定定位方式，例如 position: fixed。

    • 偏移距离：offsetTop 可以在滚动内容距离容器顶部达到指定偏移量时触发当前 Link 切换。

    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#基本示例', title: '我是固定的 Anchor' },
        { href: '#综合使用', title: '综合使用' },
        { href: '#尺寸', title: '尺寸' },
        { href: '#滑轨主题', title: '滑轨主题' },
        { href: '#动态展示', title: '动态展示' },
        { href: '#显示工具提示', title: '显示工具提示' },
        { href: '#工具提示位置', title: '工具提示位置' },
        {
            href: '#API参考',
            title: 'API参考',
            children: [
                { href: '#Anchor', title: 'Anchor' },
                { href: '#Anchor.Link', title: 'Anchor.Link' },
            ],
        },
    ];
</script>

<span>请看右侧固定的 Anchor </span>
<Anchor {links} offsetTop={100} style="position: fixed; right: 20px; top: 100px; width: 200px; z-index: 3" targetOffset={100} />

    尺寸

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

    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#组件', title: '组件' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<Anchor {links} size="default" />
    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#组件', title: '组件' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<Anchor {links} size="small" />

    滑轨主题

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

    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#尺寸', title: '尺寸' },
        { href: '#滑轨主题', title: '滑轨主题' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<div>
    <Anchor {links} offsetTop={100} railTheme="primary" targetOffset={60} />
</div>
    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#尺寸', title: '尺寸' },
        { href: '#滑轨主题', title: '滑轨主题' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<div>
    <Anchor {links} offsetTop={100} railTheme="tertiary" targetOffset={60} />
</div>
    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#尺寸', title: '尺寸' },
        { href: '#滑轨主题', title: '滑轨主题' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<div>
    <Anchor {links} offsetTop={100} railTheme="muted" targetOffset={60} />
</div>

    动态展示

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

    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        {
            href: '#动态展示',
            title: '1. 动态展示',
            children: [
                {
                    href: '#组件',
                    title: '1.1 组件',
                    children: [
                        { href: '#头像', title: '1.1.1 Avatar' },
                        { href: '#按钮', title: '1.1.2 Button' },
                        { href: '#图标', title: '1.1.3 Icon' },
                    ],
                },
                { href: '#物料', title: '1.2 物料' },
                { href: '#主题商店', title: '1.3 主题商店' },
            ],
        },
        { href: '#设计语言', title: '2. 设计语言' },
    ];
</script>

<div>
    <Anchor autoCollapse {links} offsetTop={100} targetOffset={60} />
</div>
    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        {
            href: '#动态展示',
            title: '1. 动态展示',
            children: [
                {
                    href: '#组件',
                    title: '1.1 组件',
                    children: [
                        { href: '#头像', title: '1.1.1 Avatar' },
                        { href: '#按钮', title: '1.1.2 Button' },
                        { href: '#图标', title: '1.1.3 Icon' },
                    ],
                },
                { href: '#物料', title: '1.2 物料' },
                { href: '#主题商店', title: '1.3 主题商店' },
            ],
        },
        { href: '#设计语言', title: '2. 设计语言' },
    ];
</script>

<div>
    <Anchor autoCollapse={false} {links} offsetTop={100} targetOffset={60} />
</div>

    显示工具提示

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

    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#显示工具提示', title: '工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。' },
        { href: '#组件', title: '组件' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<div>
    <Anchor {links} offsetTop={100} showTooltip targetOffset={60} />
</div>

    工具提示位置

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

    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const links = [
        { href: '#工具提示位置', title: '工具提示是一个有用的工具，它可以在文字缩略时展示全部内容。' },
        { href: '#组件', title: '组件' },
        { href: '#设计语言', title: '设计语言' },
        { href: '#物料平台', title: '物料平台' },
        { href: '#主题商店', title: '主题商店' },
    ];
</script>

<div>
    <Anchor {links} offsetTop={100} position="right" showTooltip targetOffset={60} />
</div>

    自定义滚动位置

    通过 scrollIntoViewOptions 可以调整点击锚点后目标元素在容器中的位置，类型为 scroll-into-view-if-needed 的 Options，支持 block、inline、scrollMode、boundary、skipOverflowHiddenElements。不传时 block 为 start，即目标元素滚动到容器顶部。

    • scrollMotion 决定滚动是否带动画（behavior），targetOffset 在 block 计算出的位置上再向上偏移，两者与 scrollIntoViewOptions 同时传入时依然生效。
    • 只会滚动离目标最近的、可纵向滚动的容器；仅当传入 inline 时才同时调整横向位置。
    点击链接后，章节 1 会滚动到容器中间
    点击链接后，章节 2 会滚动到容器中间
    点击链接后，章节 3 会滚动到容器中间
    代码
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    const sections = ['section-a', 'section-b', 'section-c'];
    const links = sections.map((id, index) => ({ href: `#${id}`, title: `章节 ${index + 1}` }));
    const getContainer = () => document.getElementById('scroll-box');
</script>

<div style="display: flex; gap: 24px">
    <Anchor {getContainer} {links} scrollIntoViewOptions={{ block: 'center' }} scrollMotion style="width: 160px" />
    <!-- Focusable so the keyboard can scroll this container -->
    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
    <section aria-label="章节" id="scroll-box" style="height: 240px; width: 320px; overflow: auto; border: 1px solid #ddd" tabindex="0">
        {#each sections as id, index (id)}
            <div {id} style="height: 200px; padding: 8px">点击链接后，章节 {index + 1} 会滚动到容器中间</div>
        {/each}
    </section>
</div>

    API 参考

    Anchor

    Props

    属性说明类型默认值
    autoCollapse是否在滚动时动态展示下一级锚点。booleanfalse
    defaultAnchor默认高亮的锚点。string""
    getContainer指定滚动的容器，缺省为 window。Type() => HTMLElement | Window | null-
    links锚点数据，元素为 { href, title, disabled, children }，children 嵌套下一级。href 以 # 开头时按元素 id 查找，其余按 CSS 选择器查找；title 为纯文本标题，未开启 showTooltip 时同时作为原生 title；disabled 禁用后不响应点击跳转。AnchorLinkItem[][]
    maxHeight组件的 max-height，超出时显示滚动条；style 中的 max-height 优先。string | number"750px"
    maxWidth组件的 max-width，超出时显示省略；style 中的 max-width 优先。string | number"200px"
    offsetTop滚动内容距离容器顶部达到指定偏移量时触发当前链接切换。number0
    onChange高亮的锚点改变时的回调，参数为当前锚点与上一个锚点。Type(currentLink: string, previousLink: string) => void-
    onClick点击锚点或在锚点上按 Enter 时的回调，参数为原生 MouseEvent 或 KeyboardEvent 与当前锚点；只在激活链接时触发，点击根元素的其他位置不触发。Type(event: AnchorClickEvent, currentLink: string) => void-
    positionshowTooltip 开启时 Tooltip 的显示位置，可选值同 Tooltip 的 position。Position-
    railTheme滑轨主题，可选 primary、tertiary、muted。'primary' | 'tertiary' | 'muted'"primary"
    scrollIntoViewOptions点击锚点滚动时传给 scroll-into-view-if-needed 的选项，与 scrollMotion、targetOffset 合并使用。ScrollIntoViewOptions-
    scrollMotion点击锚点滚动时是否带动画。booleanfalse
    showTooltip文字缩略时是否显示 Tooltip 及相关配置：type 为浮层组件，支持 tooltip（默认）和 popover，opts 为传给浮层组件的属性。boolean | ShowTooltipfalse
    size锚点尺寸，可选 small、default。'small' | 'default'"default"
    targetOffset锚点滚动结束时，目标距离容器顶部的偏移量。number0
    title渲染每个链接标题的 snippet，参数为 { item, level }，level 为嵌套层级，顶层为 1；优先于 links 中的 title。TypeSnippet<[AnchorTitleContext]>-

    class、style（字符串）与原生属性（如 data-*、aria-*）落在根元素（role="navigation"）上；style 中的 max-width、max-height 优先于 maxWidth、maxHeight。onClick 与 onChange 是组件回调，onClick 只在激活链接时触发。服务端首帧带全部链接，autoCollapse 的折叠首帧即正确；没有子链接的项不输出空的 role="list"。

    Svelte 没有独立的 Anchor.Link 组件，每个链接是 links 数据中的一项，字段见上方 links 的说明。

    文案规范

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

    设计变量

    下表是组件内部的 Sass 变量，不能覆写。定制样式请覆写 --semi-* CSS 变量（见 Design Token 页），或写不分层的 CSS 规则。
    Sass 变量值用法
    $transition_duration-anchor_title-textvar(--semi-transition_duration-none)锚点标题文字-文字-动画持续时间
    $transition_function-anchor_title-textvar(--semi-transition_function-easeIn)锚点标题文字-文字-过渡曲线
    $transition_delay-anchor_title-textvar(--semi-transition_delay-none)锚点标题文字-文字-延迟时间
    $transform_scale-anchor_title-textvar(--semi-transform_scale-none)锚点-放大
    $color-anchor_slide_default-bg-defaultvar(--semi-color-border)滑轨背景颜色
    $color-anchor_slide_primary-bg-activevar(--semi-color-primary)选中颜色 - Primary
    $color-anchor_slide_tertiary-bg-activevar(--semi-color-tertiary)选中颜色 - Tietrary
    $color-anchor_title-text-defaultvar(--semi-color-text-2)文字颜色 - 未选中
    $color-anchor_title-text-hovervar(--semi-color-tertiary-hover)文字颜色 - 未选中悬浮态
    $color-anchor_title_active-text-hover$color-anchor_title-text-hover文字颜色 - 选中悬浮态
    $color-anchor_title-text-activevar(--semi-color-text-0)文字颜色 - 选中
    $color-anchor_title-text-disabledvar(--semi-color-disabled-text)文字颜色 - 禁用
    $color-anchor_title-bg-defaulttransparent背景色
    $color-anchor_title-bg-activetransparent背景色 - 选中
    $color-anchor_title-outline-focus$color-focus-ring轮廓 - 聚焦
    $spacing-anchor_slide-left$spacing-none滑轨左侧位置
    $spacing-anchor_slide-top$spacing-none滑轨顶部位置
    $spacing-anchor_slide_default-Y$spacing-extra-tight选项间距 - 默认
    $spacing-anchor_slide_small-Y$spacing-extra-tight选项间距 - 紧凑
    $spacing-anchor_link_title-paddingTop$spacing-extra-tight选项文字顶部内边距
    $spacing-anchor_link_title-paddingBottom$spacing-extra-tight选项文字底部内边距
    $width-anchor_slide_default2px滑轨宽度
    $height-anchor_slide_default20px选项高度 - 默认
    $height-anchor_slide_small16px选项高度 - 小尺寸
    $radius-anchor_slide1px滑轨圆角
    $width-anchor-outline$width-focus-ringanchor轮廓宽度
    $width-anchor-outlineOffset-2pxanchor轮廓 outline-offset 宽度
    $width-anchor-outline_border_radius3pxanchor轮廓圆角

    FAQ

    1. 为何我的 Link 没有高亮和滑动跟随？
      检查下点击锚点是否可以滚动到指定位置：
      • 不可以，说明 href 有问题，检查文档中是否存在该 id；
      • 可以，可能是滚动容器设置不正确，确保文档内容被包裹在滚动容器内。滚动容器默认为 window，如果你的容器是 .my-container 的 div，则应该将滚动容器设置为该 div。
    <script lang="ts">
    import { Anchor } from '@fibrae/semi-ui-svelte';

    // 此容器不是 Anchor 组件的容器，是文档内容的容器，因为要根据文档容器去计算当前是哪个 id 在容器上方
    const getContainer = () => document.querySelector<HTMLElement>('.my-container');
</script>

<Anchor {getContainer} {links} />