Sommaire - DsfrSummary

🌟 Introduction

Le composant DsfrSummary est conçu pour afficher un sommaire accessible et stylisé selon les standards du Design System de l'État Français (DSFR). Il est idéal pour améliorer la navigation dans une page en proposant des liens vers les différentes sections.

🏅 La documentation sur le tag sommaire le DSFR

La story sur le sommaire sur le storybook de VueDsfr

📐 Structure

Le composant affiche :

• Un titre configuré via la prop title.
• Une liste ordonnée (<ol>) contenant des liens vers des ancres définies via la prop anchors.

🛠️ Props

Nom	Type	Défaut	Description
title	string	'Sommaire'	Titre du sommaire, affiché au-dessus de la liste des liens.
anchors	{ link: string, name: string }[]	[]	Liste des ancres à afficher dans le sommaire. Chaque élément correspond à un lien.

Format de anchors

Nom	Type	Description
link	string	URL ou ancre vers laquelle le lien doit pointer (ex. #section1).
name	string	Texte affiché pour l'ancre.

📡Événements

Aucun événement spécifique n'est émis par ce composant.

🧩 Slots

Aucun slot disponible pour ce composant.

📝 Exemples

Exemple de base

<DsfrSummary
  title="Sommaire de la page"
  :anchors="[
    { link: '#introduction', name: 'Introduction' },
    { link: '#chapitre1', name: 'Chapitre 1' },
    { link: '#chapitre2', name: 'Chapitre 2' }
  ]"
/>

Exemple complet

Démo

Code de la démo

<script lang="ts" setup>
import DsfrSummary from '../DsfrSummary.vue'

const title = 'Exemple de sommaire'
const anchors = [
  { link: '#', name: 'Première étape' },
  { link: '#', name: 'Deuxième étape' },
  { link: '#', name: 'Troisième étape' },
]
</script>

<template>
  <DsfrSummary
    :title="title"
    :anchors="anchors"
  />
</template>

⚙️ Code source du composant

DsfrSummary.vue

<script lang="ts" setup>
import type { DsfrSummaryProps } from './DsfrSummary.types'

export type { DsfrSummaryProps }

withDefaults(defineProps<DsfrSummaryProps>(), {
  title: 'Sommaire',
  anchors: () => [],
})
</script>

<template>
  <nav
    class="fr-summary"
    role="navigation"
    aria-labelledby="fr-summary-title"
  >
    <h2
      id="fr-summary-title"
      class="fr-summary__title"
    >
      {{ title }}
    </h2>
    <ol class="fr-summary__list">
      <li
        v-for="(anchor, idx) in anchors"
        :key="idx"
      >
        <a
          class="fr-summary__link"
          :href="anchor.link"
        >{{ anchor.name }}</a>
      </li>
    </ol>
  </nav>
</template>

DsfrSummary.types.ts

export type DsfrSummaryProps = {
  title: string
  anchors: { link: string, name: string }[]
}