BjSummary

Sommaire de page React : titre et liens d'ancrage vers les sections.

Utilisation

import { BjSummary } from '@flrxnt/dsbj/react'

export function Example() {
  return (
    <BjSummary
      title="Sommaire"
      links={[
        { label: 'Introduction', anchor: '#intro' },
        { label: 'Contact', anchor: '#contact' },
      ]}
    />
  )
}

Aperçu

Titre par défaut

Sans prop title, la valeur par défaut du composant est la chaîne « Sommaire » (titre visible et aria-label du nav).

import { BjSummary } from '@flrxnt/dsbj/react'

/** title implicite : « Sommaire » (défaut du composant) */
export function DefaultTitle() {
  return (
    <BjSummary
      links={[
        { label: 'Partie 1', anchor: '#p1' },
        { label: 'Partie 2', anchor: '#p2' },
      ]}
    />
  )
}

title personnalisé

Un title personnalisé remplace le libellé du paragraphe .bj-summary__title et aria-label.

import { BjSummary } from '@flrxnt/dsbj/react'

export function EnglishPage() {
  return (
    <BjSummary
      title="On this page"
      links={[
        { label: 'Overview', anchor: '#overview' },
        { label: 'API', anchor: '#api' },
      ]}
    />
  )
}

links (label + anchor)

Chaque entrée produit un href égal à anchor (#section, #contact, etc.).

import { BjSummary } from '@flrxnt/dsbj/react'

export function LongToc() {
  return (
    <BjSummary
      title="Table des matières"
      links={[
        { label: 'Contexte', anchor: '#contexte' },
        { label: 'Procédure', anchor: '#procedure' },
        { label: 'Pièces', anchor: '#pieces' },
        { label: 'FAQ', anchor: '#faq' },
      ]}
    />
  )
}

aria-label du nav

aria-label du <nav> est égal à title (donc au défaut « Sommaire » ou à votre chaîne).

import { BjSummary } from '@flrxnt/dsbj/react'

/** aria-label du nav = valeur de title */
export function AccessibleToc() {
  return (
    <BjSummary
      title="Navigation dans la page"
      links={[{ label: 'Résumé', anchor: '#resume' }]}
    />
  )
}

Attributs natifs du nav

className, id, autres attributs nav en plus du spread.

import { BjSummary } from '@flrxnt/dsbj/react'

export function WithNativeAttrs() {
  return (
    <BjSummary
      className="article-toc"
      id="page-summary"
      data-testid="summary"
      title="Sommaire"
      links={[{ label: 'Haut', anchor: '#top' }]}
    />
  )
}

Props

Prop	Description
`title`	Titre du bloc (défaut dans le code : « Sommaire »).
`links`	Tableau de liens avec label et anchor (href = anchor).
`(nav props)`	Attributs nav natifs supplémentaires.