Anchor

Naviguer vers les sections de la page avec mise en évidence par défilement actif.

Importation

import { Anchor } from 'asterui'

Exemples

Basique

Navigation d'ancrage verticale avec défilement actif.

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

Disposition horizontale pour la navigation supérieure.

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

Liens imbriqués

Navigation hiérarchique avec liens imbriqués.

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`

Propriété	Description	Type	Défaut
`items`	Configuration des liens d’ancrage	`AnchorLinkItem[]`	-
`direction`	Direction de disposition	`'horizontal' \| 'vertical'`	`'vertical'`
`offsetTop`	Décalage depuis le haut lors du calcul de la position de défilement	`number`	`0`
`bounds`	Distance de délimitation de la zone d’ancrage	`number`	`5`
`getContainer`	Conteneur de défilement (par défaut : window)	`() => HTMLElement \| Window`	-
`getCurrentAnchor`	Personnaliser la mise en évidence de l’ancrage	`(activeLink: string) => string`	-
`activeLink`	Lien actuellement actif (contrôlé)	`string`	-
`onChange`	Callback lorsque le lien actif change	`(activeLink: string) => void`	-
`onClick`	Callback lorsqu’un lien est cliqué	`(e, link) => void`	-
`affix`	Fixer l’ancrage lors du défilement	`boolean`	`false`
`affixOffsetTop`	Décalage en pixels depuis le haut lorsque affix est true	`number`	`0`
`replace`	Remplacer l’historique au lieu d’ajouter	`boolean`	`false`
`className`	Classe CSS personnalisée	`string`	-
`children`	Enfants Anchor.Link (alternative à items)	`React.ReactNode`	-
`data-testid`	ID de test pour les tests	`string`	-

`AnchorLinkItem`

Propriété	Description	Type	Défaut
`href`	ID de l’élément cible (sans #)	`string`	-
`title`	Titre du lien	`React.ReactNode`	-
`children`	Éléments de liens imbriqués	`AnchorLinkItem[]`	-
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

Utilise l’élément sémantique <nav> pour la navigation
Les liens sont accessibles au clavier
L’état actif est indiqué visuellement
Le défilement fluide respecte les préférences de mouvement de l’utilisateur