Panneau repliable

Zone de contenu dépliable ou repliable, avec un mode accordéon (un seul panneau ouvert à la fois) et un contrôle par v-model.

Panneau repliable

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">Plusieurs panneaux peuvent être ouverts simultanément</p>
    <LhCollapse v-model="actives">
      <LhCollapseItem name="song" title="dynastie Song">
        <p class="demo-note">Fan Kuan, « Voyageurs parmi les montagnes et les rivières » ; Guo Xi, « Le Premier Printemps ».</p>
      </LhCollapseItem>
      <LhCollapseItem name="yuan" title="dynastie Yuan">
        <p class="demo-note">Huang Gongwang, « Séjour dans les montagnes de Fuchun ».</p>
      </LhCollapseItem>
      <LhCollapseItem name="ming" title="dynastie Ming" disabled>
        <p class="demo-note">Panneau désactivé.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">Mode accordéon (un seul panneau ouvert à la fois)</p>
    <LhCollapse v-model="active" accordion>
      <LhCollapseItem name="gongbi" title="Pinceau fin">
        <p class="demo-note">Dessin fin au trait, superpositions de lavis.</p>
      </LhCollapseItem>
      <LhCollapseItem name="xieyi" title="Style libre">
        <p class="demo-note">Trait libéré, sans recherche de la ressemblance.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">Panneaux ouverts : {{ Array.isArray(actives) ? actives.join(', ') : actives }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ actives: ['song'], active: 'gongbi' }),
}
</script>

Collapse Props

Prop	Description	Type	Valeur par défaut
v-model	Panneaux actuellement actifs (prop modelValue contrôlé)	string \| number \| (string \| number)[]	—
accordion	Mode accordéon : un seul panneau ouvert à la fois	boolean	false
sx	Raccourci de mise en page sx	—	—

CollapseItem Props

Prop	Description	Type	Valeur par défaut
name	Identifiant unique du panneau (obligatoire)	string \| number	—
title	Titre (le slot title est également disponible)	string	''
disabled	Déploiement désactivé	boolean	false
sx	Raccourci de mise en page sx	—	—

Events

Événement	Description	Paramètre de rappel
change	Émis lorsque les panneaux actifs changent	Valeur active courante : valeur unique en mode accordéon, tableau sinon