Anchor

Navega a secciones de la página con resaltado de scroll spy.

Importar

import { Anchor } from 'asterui'

Ejemplos

Básico

Navegación de anclaje vertical con 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

Disposición horizontal para navegación 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

Enlaces Anidados

Navegación jerárquica con enlaces anidados.

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`

Propiedad	Descripción	Tipo	Predeterminado
`items`	Configuración de enlaces de anclaje	`AnchorLinkItem[]`	-
`direction`	Dirección de disposición	`'horizontal' \| 'vertical'`	`'vertical'`
`offsetTop`	Desplazamiento desde arriba al calcular la posición de scroll	`number`	`0`
`bounds`	Distancia límite del área de anclaje	`number`	`5`
`getContainer`	Contenedor de scroll (predeterminado: window)	`() => HTMLElement \| Window`	-
`getCurrentAnchor`	Personalizar el resaltado del anclaje	`(activeLink: string) => string`	-
`activeLink`	Enlace activo actual (controlado)	`string`	-
`onChange`	Callback cuando cambia el enlace activo	`(activeLink: string) => void`	-
`onClick`	Callback cuando se hace clic en un enlace	`(e, link) => void`	-
`affix`	Fijar anclaje al desplazarse	`boolean`	`false`
`affixOffsetTop`	Desplazamiento en píxeles desde arriba cuando affix es true	`number`	`0`
`replace`	Reemplazar historial en lugar de push	`boolean`	`false`
`className`	Clase CSS personalizada	`string`	-
`children`	Hijos Anchor.Link (alternativa a items)	`React.ReactNode`	-
`data-testid`	ID de prueba para pruebas	`string`	-

`AnchorLinkItem`

Propiedad	Descripción	Tipo	Predeterminado
`href`	ID del elemento objetivo (sin #)	`string`	-
`title`	Título del enlace	`React.ReactNode`	-
`children`	Elementos de enlace anidados	`AnchorLinkItem[]`	-
`data-testid`	ID de prueba para pruebas	`string`	-

Accesibilidad

Usa el elemento semántico <nav> para navegación
Los enlaces son accesibles mediante teclado
El estado activo está indicado visualmente
El desplazamiento suave respeta las preferencias de movimiento del usuario