Panel plegable

Áreas de contenido que se pueden expandir y contraer. Admite el modo acordeón (solo un panel abierto a la vez) y el control mediante v-model.

Panel plegable

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">Se pueden abrir varios a la vez</p>
    <LhCollapse v-model="actives">
      <LhCollapseItem name="song" title="Dinastía Song">
        <p class="demo-note">Fan Kuan, *Viaje por las montañas y los arroyos*; Guo Xi, *Primera primavera*.</p>
      </LhCollapseItem>
      <LhCollapseItem name="yuan" title="Dinastía Yuan">
        <p class="demo-note">Huang Gongwang, *Morada en las montañas Fuchun*.</p>
      </LhCollapseItem>
      <LhCollapseItem name="ming" title="Dinastía Ming" disabled>
        <p class="demo-note">Panel deshabilitado.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">Modo acordeón (solo uno abierto a la vez)</p>
    <LhCollapse v-model="active" accordion>
      <LhCollapseItem name="gongbi" title="Gongbi">
        <p class="demo-note">Trazos finos y capas sucesivas de tinta.</p>
      </LhCollapseItem>
      <LhCollapseItem name="xieyi" title="Xieyi">
        <p class="demo-note">Tinta libre, sin pretender la semejanza formal.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">Abiertos actualmente: {{ Array.isArray(actives) ? actives.join(', ') : actives }}</p>
  </div>
</template>

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

Collapse Props

Prop	Descripción	Tipo	Predeterminado
v-model	Paneles activos actualmente (prop modelValue controlado)	string \| number \| (string \| number)[]	—
accordion	Modo acordeón: solo uno abierto a la vez	boolean	false
sx	Propiedades de layout abreviadas	—	—

CollapseItem Props

Prop	Descripción	Tipo	Predeterminado
name	Identificador único del panel (obligatorio)	string \| number	—
title	Título (también admite el slot title)	string	''
disabled	Deshabilita la expansión	boolean	false
sx	Propiedades de layout abreviadas	—	—

Events

Evento	Descripción	Parámetro del callback
change	Se emite al cambiar el panel activo	Valor activo actual: un único valor en el modo acordeón, un arreglo en caso contrario