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

Разворачиваемые и сворачиваемые области содержимого; поддерживается режим аккордеона (одновременно развёрнут только один) и управление через v-model.

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

<template>
  <div class="demo-col" style="max-width: 420px">
    <p class="demo-note">Можно развернуть несколько одновременно</p>
    <LhCollapse v-model="actives">
      <LhCollapseItem name="song" title="Эпоха Сун">
        <p class="demo-note">Фань Куань, «Путешествие среди гор и ручьёв»; Го Си, «Ранняя весна».</p>
      </LhCollapseItem>
      <LhCollapseItem name="yuan" title="Эпоха Юань">
        <p class="demo-note">Хуан Гунван, «Жилище в горах Фучунь».</p>
      </LhCollapseItem>
      <LhCollapseItem name="ming" title="Эпоха Мин" disabled>
        <p class="demo-note">Отключённая панель.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">Режим аккордеона (одновременно развёрнут только один)</p>
    <LhCollapse v-model="active" accordion>
      <LhCollapseItem name="gongbi" title="Гунби">
        <p class="demo-note">Тщательные контуры, многослойные лессировки.</p>
      </LhCollapseItem>
      <LhCollapseItem name="xieyi" title="Сеи">
        <p class="demo-note">Свободная кисть, отказ от внешнего сходства.</p>
      </LhCollapseItem>
    </LhCollapse>
    <p class="demo-note">Развёрнуто сейчас: {{ Array.isArray(actives) ? actives.join(', ') : actives }}</p>
  </div>
</template>

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

Collapse Props

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

CollapseItem Props

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

Events

Событие	Описание	Параметр колбэка
change	Срабатывает при изменении активных панелей	Текущее активное значение: в режиме аккордеона — одно значение, иначе массив