Anchor 锚点

导航到页面各部分，带有滚动监听高亮显示。

引入

import { Anchor } from 'asterui'

示例

基本用法

带滚动监听的垂直锚点导航。

Section 1

Scroll to see active link change

Section 2

Content for section 2

Section 3

Content for section 3

import { Anchor, Flex } from 'asterui'

function App() {
  const getContainer = () => document.getElementById('scroll-container-basic') as HTMLElement
  
  return (
      <Flex gap="md">
        <Anchor
          items={[
            { href: 'section-1', title: 'Section 1' },
            { href: 'section-2', title: 'Section 2' },
            { href: 'section-3', title: 'Section 3' },
          ]}
          getContainer={getContainer}
        />
        <div id="scroll-container-basic" className="flex-1 h-48 overflow-y-auto border rounded p-2">
          <section id="section-1" className="h-32 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Section 1</h3>
            <p className="text-sm">Scroll to see active link change</p>
          </section>
          <section id="section-2" className="h-32 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Section 2</h3>
            <p className="text-sm">Content for section 2</p>
          </section>
          <section id="section-3" className="h-32 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Section 3</h3>
            <p className="text-sm">Content for section 3</p>
          </section>
        </div>
      </Flex>
    )
}

export default App

横向布局

顶部导航的横向布局。

Introduction

Welcome to our product

Features

Amazing features

Pricing

Affordable plans

FAQ

Common questions

import { Anchor } from 'asterui'

function App() {
  const getContainer = () => document.getElementById('scroll-container-horizontal') as HTMLElement
  
  return (
      <div>
        <Anchor
          direction="horizontal"
          items={[
            { href: 'intro', title: 'Introduction' },
            { href: 'features', title: 'Features' },
            { href: 'pricing', title: 'Pricing' },
            { href: 'faq', title: 'FAQ' },
          ]}
          getContainer={getContainer}
        />
        <div id="scroll-container-horizontal" className="h-32 overflow-y-auto border rounded p-2 mt-2">
          <section id="intro" className="h-24 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Introduction</h3>
            <p className="text-sm">Welcome to our product</p>
          </section>
          <section id="features" className="h-24 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Features</h3>
            <p className="text-sm">Amazing features</p>
          </section>
          <section id="pricing" className="h-24 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Pricing</h3>
            <p className="text-sm">Affordable plans</p>
          </section>
          <section id="faq" className="h-24 p-3 bg-base-200 rounded">
            <h3 className="font-bold">FAQ</h3>
            <p className="text-sm">Common questions</p>
          </section>
        </div>
      </div>
    )
}

export default App

嵌套链接

带嵌套链接的层级导航。

Getting Started

Installation

Configuration

Components

Buttons

Forms

import { Anchor, Flex } from 'asterui'

function App() {
  const getContainer = () => document.getElementById('scroll-container-nested') as HTMLElement
  
  return (
      <Flex gap="md">
        <Anchor
          items={[
            {
              href: 'getting-started',
              title: 'Getting Started',
              children: [
                { href: 'installation', title: 'Installation' },
                { href: 'configuration', title: 'Configuration' },
              ],
            },
            {
              href: 'components',
              title: 'Components',
              children: [
                { href: 'buttons', title: 'Buttons' },
                { href: 'forms', title: 'Forms' },
              ],
            },
          ]}
          getContainer={getContainer}
        />
        <div id="scroll-container-nested" className="flex-1 h-48 overflow-y-auto border rounded p-2">
          <section id="getting-started" className="h-20 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Getting Started</h3>
          </section>
          <section id="installation" className="h-20 mb-2 p-3 bg-base-200 rounded ml-4">
            <h4 className="font-semibold text-sm">Installation</h4>
          </section>
          <section id="configuration" className="h-20 mb-2 p-3 bg-base-200 rounded ml-4">
            <h4 className="font-semibold text-sm">Configuration</h4>
          </section>
          <section id="components" className="h-20 mb-2 p-3 bg-base-200 rounded">
            <h3 className="font-bold">Components</h3>
          </section>
          <section id="buttons" className="h-20 mb-2 p-3 bg-base-200 rounded ml-4">
            <h4 className="font-semibold text-sm">Buttons</h4>
          </section>
          <section id="forms" className="h-20 p-3 bg-base-200 rounded ml-4">
            <h4 className="font-semibold text-sm">Forms</h4>
          </section>
        </div>
      </Flex>
    )
}

export default App

API

`Anchor`

属性	描述	类型	默认值
`items`	锚点链接配置	`AnchorLinkItem[]`	-
`direction`	布局方向	`'horizontal' \| 'vertical'`	`'vertical'`
`offsetTop`	计算滚动位置时距离顶部的偏移量	`number`	`0`
`bounds`	锚点区域的边界距离	`number`	`5`
`getContainer`	滚动容器（默认：window）	`() => HTMLElement \| Window`	-
`getCurrentAnchor`	自定义锚点高亮	`(activeLink: string) => string`	-
`activeLink`	当前激活的链接（受控）	`string`	-
`onChange`	激活链接改变时的回调函数	`(activeLink: string) => void`	-
`onClick`	点击链接时的回调函数	`(e, link) => void`	-
`affix`	滚动时固定锚点	`boolean`	`false`
`affixOffsetTop`	affix 为 true 时距离顶部的像素偏移量	`number`	`0`
`replace`	替换历史记录而不是推入	`boolean`	`false`
`className`	自定义 CSS 类名	`string`	-
`children`	Anchor.Link 子元素（items 的替代方案）	`React.ReactNode`	-
`data-testid`	用于测试的测试 ID	`string`	-

`AnchorLinkItem`

属性	描述	类型	默认值
`href`	目标元素 id（不带 #）	`string`	-
`title`	链接标题	`React.ReactNode`	-
`children`	嵌套链接项	`AnchorLinkItem[]`	-
`data-testid`	用于测试的测试 ID	`string`	-

无障碍

使用语义化的 <nav> 元素表示导航
链接可通过键盘访问
激活状态在视觉上有明确指示
平滑滚动遵循用户的动作偏好