Panel plegable

Grupo de paneles plegables en modo acordeón o con varias secciones abiertas, alineado estrictamente con el patrón accordion de APG.

Uso básico

Uso básico

Mantiene la coherencia visual e interactiva con el conjunto de la página.

Ofrece una respuesta de estado clara e inmediata tras cada acción.

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

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Coherencia y diversidad">Contenido</LhCollapseItem>
    <LhCollapseItem name="b" title="Retroalimentación">Contenido</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Coherencia y diversidad">Contenido</LhCollapseItem>
    <LhCollapseItem name="b" title="Retroalimentación">Contenido</LhCollapseItem>
  </LhCollapse>
</template>

Acordeón

Acordeón

Como máximo, una sección abierta a la vez.

Se permite que todo esté plegado.

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

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Solo uno abierto">Contenido</LhCollapseItem>
    <LhCollapseItem name="b" title="Volver a hacer clic repliega">Contenido</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Solo uno abierto">Contenido</LhCollapseItem>
    <LhCollapseItem name="b" title="Volver a hacer clic repliega">Contenido</LhCollapseItem>
  </LhCollapse>
</template>

v-model controlado y elementos deshabilitados

v-model controla los paneles abiertos actualmente (un valor o una matriz, según el modo acordeón); disabled deshabilita un panel concreto.

Expansión controlada

Contenido controlado A

Contenido deshabilitado

Contenido controlado C

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

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

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Panel A">Contenido controlado A</LhCollapseItem>
    <LhCollapseItem name="b" title="Panel B (deshabilitado)" disabled>Contenido deshabilitado</LhCollapseItem>
    <LhCollapseItem name="c" title="Panel C">Contenido controlado C</LhCollapseItem>
  </LhCollapse>
</template>

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

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Panel A">Contenido controlado A</LhCollapseItem>
    <LhCollapseItem name="b" title="Panel B (deshabilitado)" disabled>Contenido deshabilitado</LhCollapseItem>
    <LhCollapseItem name="c" title="Panel C">Contenido controlado C</LhCollapseItem>
  </LhCollapse>
</template>

API

LhCollapse Props

Prop	Descripción	Tipo	Predeterminado
modelValue	Paneles activos actualmente (v-model controlado; un valor o una matriz)	LhCollapseKey | LhCollapseKey[]	—
accordion	Modo acordeón: solo uno abierto a la vez	boolean	false
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros de la retrollamada
update:modelValue	Se dispara cuando cambian los paneles abiertos (v-model controlado)	(value: LhCollapseKey | LhCollapseKey[])
change	Se dispara cuando cambian los paneles abiertos (no controlado; en modo acordeón, un único valor)	(value: LhCollapseKey | LhCollapseKey[])

LhCollapseItem Props

Prop	Descripción	Tipo	Predeterminado
name	Identificador único del panel	string | number	—
title	Título (también puede usarse el slot title)	string	—
disabled	Deshabilitado	boolean	false
sx	Props de disposición rápida	LhSxProps	—

Slots: title para el título y default para el contenido.

Accesibilidad

• Alineado con el patrón accordion de APG: el título es un <button aria-expanded aria-controls> real; la zona de contenido lleva role="region" + aria-labelledby
• Enter / Espacio conmutan; los elementos deshabilitados se excluyen de la interacción con disabled nativo
• La transición de altura usa CSS grid-template-rows: 0fr/1fr (sin medición de altura con JS) y respeta prefers-reduced-motion

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/collapse/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhCollapseProps

/** Props del panel plegable */
export interface LhCollapseProps {
  /** Paneles activos actualmente (v-model controlado: Omit facilita el valor único del acordeón) */
  modelValue?: LhCollapseKey | LhCollapseKey[]
  /** Modo acordeón: solo uno abierto a la vez */
  accordion?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

LhCollapseItemProps

/** Props del elemento del panel */
export interface LhCollapseItemProps {
  /** Identificador único del panel (obligatorio) */
  name: LhCollapseKey
  /** Título (también puede usarse el slot title) */
  title?: string
  disabled?: boolean
  /** Props de disposición rápida */
  sx?: LhSxProps
}

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

export type LhCollapseKey = string | number