Anchor

Navegar para seções da página com destaque de scroll spy.

Importação

import { Anchor } from 'asterui'

Exemplos

Básico

Navegação de âncora vertical com scroll spy.

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

Horizontal

Layout horizontal para navegação superior.

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

Links Aninhados

Navegação hierárquica com links aninhados.

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`

Propriedade	Descrição	Tipo	Padrão
`items`	Configuração dos links de âncora	`AnchorLinkItem[]`	-
`direction`	Direção do layout	`'horizontal' \| 'vertical'`	`'vertical'`
`offsetTop`	Deslocamento do topo ao calcular a posição de rolagem	`number`	`0`
`bounds`	Distância limite da área de âncora	`number`	`5`
`getContainer`	Contêiner de rolagem (padrão: window)	`() => HTMLElement \| Window`	-
`getCurrentAnchor`	Personalizar o destaque de âncora	`(activeLink: string) => string`	-
`activeLink`	Link atualmente ativo (controlado)	`string`	-
`onChange`	Callback quando o link ativo muda	`(activeLink: string) => void`	-
`onClick`	Callback quando um link é clicado	`(e, link) => void`	-
`affix`	Fixar âncora durante a rolagem	`boolean`	`false`
`affixOffsetTop`	Deslocamento de pixels do topo quando affix é true	`number`	`0`
`replace`	Substituir histórico em vez de adicionar	`boolean`	`false`
`className`	Classe CSS personalizada	`string`	-
`children`	Filhos Anchor.Link (alternativa a items)	`React.ReactNode`	-
`data-testid`	ID de teste para testes	`string`	-

`AnchorLinkItem`

Propriedade	Descrição	Tipo	Padrão
`href`	ID do elemento alvo (sem #)	`string`	-
`title`	Título do link	`React.ReactNode`	-
`children`	Itens de link aninhados	`AnchorLinkItem[]`	-
`data-testid`	ID de teste para testes	`string`	-

Acessibilidade

Usa o elemento semântico <nav> para navegação
Links são acessíveis via teclado
O estado ativo é indicado visualmente
A rolagem suave respeita as preferências de movimento do usuário