Panneau repliable

Groupe de panneaux repliables, en mode accordéon ou à contenus multiples, strictement conforme au pattern accordion des APG.

Utilisation de base

Utilisation de base

Des aspects visuels et interactifs cohérents avec l'ensemble de la page.

Un retour d'état clair et rapide après chaque action.

<script setup lang="ts">
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Cohérence et diversité">Contenu</LhCollapseItem>
    <LhCollapseItem name="b" title="Retours">Contenu</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Cohérence et diversité">Contenu</LhCollapseItem>
    <LhCollapseItem name="b" title="Retours">Contenu</LhCollapseItem>
  </LhCollapse>
</template>

Accordéon

Accordéon

Une seule ouverture à la fois, au maximum.

Tout replier est autorisé.

<script setup lang="ts">
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Un seul ouvert">Contenu</LhCollapseItem>
    <LhCollapseItem name="b" title="Un nouveau clic replie">Contenu</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Un seul ouvert">Contenu</LhCollapseItem>
    <LhCollapseItem name="b" title="Un nouveau clic replie">Contenu</LhCollapseItem>
  </LhCollapse>
</template>

v-model contrôlé et élément désactivé

v-model contrôle les panneaux ouverts (valeur unique ou tableau, selon le mode accordéon) ; disabled désactive un panneau individuel.

Ouverture contrôlée

Contenu contrôlé A

Contenu désactivé

Contenu contrôlé C

<script setup>
import { ref } from 'vue'

const activeNames = ref(['a'])
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Panneau A">Contenu contrôlé A</LhCollapseItem>
    <LhCollapseItem name="b" title="Panneau B (désactivé)" disabled>Contenu désactivé</LhCollapseItem>
    <LhCollapseItem name="c" title="Panneau C">Contenu contrôlé C</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {
  data() {
    return { activeNames: ['a'] }
  },
}
</script>

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Panneau A">Contenu contrôlé A</LhCollapseItem>
    <LhCollapseItem name="b" title="Panneau B (désactivé)" disabled>Contenu désactivé</LhCollapseItem>
    <LhCollapseItem name="c" title="Panneau C">Contenu contrôlé C</LhCollapseItem>
  </LhCollapse>
</template>

API

LhCollapse Props

Propriété	Description	Type	Valeur par défaut
modelValue	Panneaux actuellement actifs (v-model contrôlé, valeur unique ou tableau)	LhCollapseKey | LhCollapseKey[]	—
accordion	Mode accordéon : un seul panneau ouvert à la fois	boolean	false
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètre de rappel
update:modelValue	Déclenché lorsque les panneaux ouverts changent (v-model contrôlé)	(value: LhCollapseKey | LhCollapseKey[])
change	Déclenché lorsque les panneaux ouverts changent (non contrôlé ; valeur unique en mode accordéon)	(value: LhCollapseKey | LhCollapseKey[])

LhCollapseItem Props

Propriété	Description	Type	Valeur par défaut
name	Identifiant unique du panneau	string | number	—
title	Titre (le slot title convient également)	string	—
disabled	Désactivé	boolean	false
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Slots : title pour le titre, default pour le contenu.

Accessibilité

• Conforme au pattern accordion des APG : le titre est un véritable <button aria-expanded aria-controls>, la zone de contenu a role="region" + aria-labelledby
• Enter / Espace bascule l'état ; les éléments désactivés sont disabled en natif et exclus des interactions
• La transition de hauteur utilise CSS grid-template-rows: 0fr/1fr (sans mesure de hauteur en JS) et respecte prefers-reduced-motion

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/collapse/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhCollapseProps

/** Props du panneau repliable */
export interface LhCollapseProps {
  /** Panneaux actuellement actifs (v-model contrôlé : Omit facilite la valeur unique en mode accordéon) */
  modelValue?: LhCollapseKey | LhCollapseKey[]
  /** Mode accordéon : un seul panneau ouvert à la fois */
  accordion?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhCollapseItemProps

/** Props de l'élément de panneau */
export interface LhCollapseItemProps {
  /** Identifiant unique du panneau (obligatoire) */
  name: LhCollapseKey
  /** Titre (le slot title convient également) */
  title?: string
  disabled?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhCollapseKey _{(provient de @lh-ui/share/core/collapse)}

export type LhCollapseKey = string | number