Сворачиваемая панель

Группа сворачиваемых панелей в режиме аккордеона или с несколькими раскрытыми элементами; строго соответствует шаблону APG accordion.

Базовое использование

Базовое использование

Единый визуальный стиль и взаимодействие со страницей в целом.

Чёткая и своевременная обратная связь после выполнения действия.

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

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Согласованность и разнообразие">Содержимое</LhCollapseItem>
    <LhCollapseItem name="b" title="Обратная связь">Содержимое</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse>
    <LhCollapseItem name="a" title="Согласованность и разнообразие">Содержимое</LhCollapseItem>
    <LhCollapseItem name="b" title="Обратная связь">Содержимое</LhCollapseItem>
  </LhCollapse>
</template>

Аккордеон

Аккордеон

Одновременно раскрыт максимум один элемент.

Допустимо полностью свёрнутое состояние.

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

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Только один открыт">Содержимое</LhCollapseItem>
    <LhCollapseItem name="b" title="Повторный клик сворачивает">Содержимое</LhCollapseItem>
  </LhCollapse>
</template>

<script>
export default {}
</script>

<template>
  <LhCollapse accordion>
    <LhCollapseItem name="a" title="Только один открыт">Содержимое</LhCollapseItem>
    <LhCollapseItem name="b" title="Повторный клик сворачивает">Содержимое</LhCollapseItem>
  </LhCollapse>
</template>

Управляемый v-model и отключаемые элементы

v-model управляет текущими раскрытыми панелями (одно значение или массив в зависимости от режима accordion); disabled отключает отдельную панель.

Управляемое раскрытие

Управляемое содержимое A

Отключённое содержимое

Управляемое содержимое C

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

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

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Панель A">Управляемое содержимое A</LhCollapseItem>
    <LhCollapseItem name="b" title="Панель B (отключена)" disabled>Отключённое содержимое</LhCollapseItem>
    <LhCollapseItem name="c" title="Панель C">Управляемое содержимое C</LhCollapseItem>
  </LhCollapse>
</template>

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

<template>
  <LhCollapse v-model="activeNames">
    <LhCollapseItem name="a" title="Панель A">Управляемое содержимое A</LhCollapseItem>
    <LhCollapseItem name="b" title="Панель B (отключена)" disabled>Отключённое содержимое</LhCollapseItem>
    <LhCollapseItem name="c" title="Панель C">Управляемое содержимое C</LhCollapseItem>
  </LhCollapse>
</template>

API

LhCollapse Props

Свойство	Описание	Тип	По умолчанию
modelValue	Текущие активные панели (управляемый v-model; одно значение или массив)	LhCollapseKey | LhCollapseKey[]	—
accordion	Режим аккордеона: одновременно раскрыт только один элемент	boolean	false
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Events

Событие	Описание	Параметр обратного вызова
update:modelValue	Срабатывает при изменении раскрытых панелей (управляемый v-model)	(value: LhCollapseKey | LhCollapseKey[])
change	Срабатывает при изменении раскрытых панелей (неуправляемый режим; в режиме accordion — одно значение)	(value: LhCollapseKey | LhCollapseKey[])

LhCollapseItem Props

Свойство	Описание	Тип	По умолчанию
name	Уникальный идентификатор панели	string | number	—
title	Заголовок (можно также использовать слот title)	string	—
disabled	Отключена ли панель	boolean	false
sx	Сокращённые свойства компоновки sx	LhSxProps	—

Слоты: title — заголовок, default — содержимое.

Доступность

• Соответствие шаблону APG accordion: заголовок — настоящий <button aria-expanded aria-controls>, область содержимого — role="region" + aria-labelledby
• Переключение через Enter / Space; отключённые элементы выводятся как нативные disabled и исключаются из взаимодействия
• Переход высоты выполнён на CSS grid-template-rows: 0fr/1fr (без JS-измерения), уважает prefers-reduced-motion

Типы

TypeScript-типы, экспортируемые этим компонентом (извлечены автоматически из packages/components/collapse/src/types.ts и исходников @lh-ui/share/core/*; раскройте нужный пункт, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhCollapseProps

/** Props сворачиваемой панели */
export interface LhCollapseProps {
  /** Текущие активные панели (управляемый v-model: Omit facilitates accordion single value) */
  modelValue?: LhCollapseKey | LhCollapseKey[]
  /** Режим аккордеона: одновременно раскрыт только один элемент */
  accordion?: boolean
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

LhCollapseItemProps

/** Props элемента панели */
export interface LhCollapseItemProps {
  /** Уникальный идентификатор панели (обязателен) */
  name: LhCollapseKey
  /** Заголовок (можно также использовать слот title) */
  title?: string
  disabled?: boolean
  /** Сокращённые свойства компоновки sx */
  sx?: LhSxProps
}

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

export type LhCollapseKey = string | number