Если разделы равнозначны и пользователь переключается между ними — возьмите CdsTabs. Для иерархии из вложенных узлов подойдёт CdsTree, а для блока, который просто отделяет контент, — CdsCard.

Анатомия

Панели всегда живут внутри группы CdsExpandablePanels: она хранит, какие панели раскрыты, и раздаёт общие настройки. Каждая панель — заголовок-кнопка с иконкой состояния и раскрываемое содержимое.

Storybook

Вариации

Группа панелей

CdsExpandablePanel без обёртки CdsExpandablePanels не работает — группа отвечает за раскрытие. Простую панель собирают из пропсов title и text, без слотов. По умолчанию раскрыта одна панель: открывая следующую, вы сворачиваете предыдущую.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel
      title="Условия доставки"
      text="Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита."
    />
    <CdsExpandablePanel
      title="Способы оплаты"
      text="Оплатите картой онлайн или запросите счёт — он придёт на почту в течение часа."
    />
    <CdsExpandablePanel
      title="Возврат"
      text="Вернуть товар можно в течение 14 дней после получения, если он не был в использовании."
    />
  </CdsExpandablePanels>
</template>

Внешний вид

Свойство appearance задаёт фон панелей: primary — на обычной странице, secondary — на цветной подложке, transparent — когда панель встроена в уже оформленный блок (карточку, сайдбар).

Отступ между панелями меняет свойство gap — оно принимает число или строку с CSS-единицами.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';

const appearances = ['primary', 'secondary', 'transparent'] as const;

const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
</script>

<template>
  <div class="m-auto flex max-w-[500px] flex-col gap-4">
    <CdsExpandablePanels v-for="appearance in appearances" :key="appearance" :appearance="appearance">
      <CdsExpandablePanel :title="`Внешний вид ${appearance}`" :text="text" />
      <CdsExpandablePanel title="Способы оплаты" text="Оплатите картой онлайн или запросите счёт." />
    </CdsExpandablePanels>
  </div>
</template>

Компоновка

Свойство variant="accordion" убирает отступы и склеивает панели в единый блок с общими скруглениями. Так список из нескольких вопросов читается как одна таблица, а не как набор карточек.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
</script>

<template>
  <CdsExpandablePanels variant="accordion" class="m-auto max-w-[500px]">
    <CdsExpandablePanel
      title="Условия доставки"
      text="Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита."
    />
    <CdsExpandablePanel
      title="Способы оплаты"
      text="Оплатите картой онлайн или запросите счёт — он придёт на почту в течение часа."
    />
    <CdsExpandablePanel
      title="Возврат"
      text="Вернуть товар можно в течение 14 дней после получения, если он не был в использовании."
    />
  </CdsExpandablePanels>
</template>

Раскрытие

Свойство multiple разрешает держать открытыми несколько панелей сразу. Через v-model вы читаете и задаёте, что раскрыто: индекс панели (или её value) в обычном режиме и массив — в multiple. Свойство mandatory запрещает сворачивать последнюю открытую панель, max ограничивает число одновременно раскрытых.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
import { ref } from 'vue';

const opened = ref<number[]>([0]);

const sections = [
  { title: 'Условия доставки', text: 'Курьер привезёт заказ в течение трёх рабочих дней.' },
  { title: 'Способы оплаты', text: 'Оплатите картой онлайн или запросите счёт.' },
  { title: 'Возврат', text: 'Вернуть товар можно в течение 14 дней после получения.' }
];
</script>

<template>
  <div class="m-auto flex max-w-[500px] flex-col gap-2">
    <span class="text-content-secondary">Раскрыты: {{ opened }}</span>

    <CdsExpandablePanels v-model="opened" multiple>
      <CdsExpandablePanel
        v-for="(section, index) in sections"
        :key="index"
        :value="index"
        :title="section.title"
        :text="section.text"
      />
    </CdsExpandablePanels>
  </div>
</template>

Состояния

Свойство disabled на панели блокирует одну панель, на группе — сразу все: заголовок перестаёт откликаться и теряет контраст. Свойство readonly оставляет панели в текущем состоянии — используйте его в режиме просмотра, когда содержимое нужно показать, но переключать нечего.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';

const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
</script>

<template>
  <div class="m-auto flex max-w-[500px] flex-col gap-4">
    <CdsExpandablePanels>
      <CdsExpandablePanel title="Доступная панель" :text="text" />
      <CdsExpandablePanel disabled title="Заблокированная панель" :text="text" />
    </CdsExpandablePanels>

    <CdsExpandablePanels disabled>
      <CdsExpandablePanel title="Вся группа заблокирована" :text="text" />
      <CdsExpandablePanel title="Способы оплаты" text="Оплатите картой онлайн или запросите счёт." />
    </CdsExpandablePanels>

    <CdsExpandablePanels readonly :model-value="0">
      <CdsExpandablePanel title="Только для чтения — панель раскрыта и не сворачивается" :text="text" />
    </CdsExpandablePanels>
  </div>
</template>

Иконки

Иконку состояния задают свойства expand-icon и collapse-icon — на группе, на панели или на отдельном заголовке; значение с ближайшего уровня побеждает. Слот action заголовка заменяет иконку целиком и получает состояние панели, а hide-actions убирает её вовсе.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsExpandablePanel,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsIcon
} from '@central-design-system/components';

const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel title="Иконки на панели" expand-icon="add" collapse-icon="minus" :text="text" />

    <CdsExpandablePanel :text="text">
      <CdsExpandablePanelTitle expand-icon="chevron-right" collapse-icon="chevron-down">
        Иконки на заголовке
      </CdsExpandablePanelTitle>
    </CdsExpandablePanel>

    <CdsExpandablePanel :text="text">
      <CdsExpandablePanelTitle>
        Своя разметка в слоте action

        <template #action="{ expanded }">
          <CdsIcon :name="expanded ? 'visibility-off' : 'visibility'" />
        </template>
      </CdsExpandablePanelTitle>
    </CdsExpandablePanel>

    <CdsExpandablePanel hide-actions title="Без иконки" :text="text" />
  </CdsExpandablePanels>
</template>

Слоты

Пропсов title и text хватает для текстовой панели. Как только в заголовке нужен счётчик, статус или иконка — соберите его из CdsExpandablePanelTitle и CdsExpandablePanelContent.

Слот	Описание
CdsExpandablePanels → default	Панели группы. В аргументах — навигация next и prev
CdsExpandablePanel → title	Содержимое заголовка. Замещает текст из title
CdsExpandablePanel → text	Раскрываемое содержимое. Замещает текст из text
CdsExpandablePanelTitle → default	Содержимое заголовка. В аргументах — expanded, disabled, readonly
CdsExpandablePanelTitle → action	Иконка раскрытия. В аргументах — то же состояние панели

Sandbox Storybook

<script setup lang="ts">
import {
  CdsBadge,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsIcon,
  CdsLink,
  CdsTag
} from '@central-design-system/components';
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>
        <div class="flex w-full items-center gap-1">
          <CdsIcon name="file" />
          <span>Документы</span>
          <CdsBadge inline :content="12" />
        </div>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col gap-1">
          <CdsLink href="#" text="Договор поставки.pdf" />
          <CdsLink href="#" text="Спецификация.xlsx" />
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Статус заявки</span>
            <span v-if="!expanded" class="text-content-secondary">На согласовании у трёх участников</span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-wrap gap-1">
          <CdsTag text="Иванов — согласовано" />
          <CdsTag text="Петрова — в работе" />
          <CdsTag text="Сидоров — ждёт" />
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>
  </CdsExpandablePanels>
</template>

Рекомендации

Storybook

Сценарии использования

Вопросы и ответы

Классический случай для accordion: список вопросов виден целиком, ответ раскрывается по клику. Одновременно открыт один ответ — так пользователь не теряет место в списке. Содержимое рендерится только после первого раскрытия; если ответы должны попадать в поисковую выдачу, включите eager.

Sandbox Storybook

<script setup lang="ts">
import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';

const questions = [
  {
    title: 'Как оплатить заказ по счёту?',
    text: 'Выберите оплату по счёту при оформлении — документ придёт на почту в течение часа. Заказ уйдёт в работу после поступления денег.'
  },
  {
    title: 'Можно ли изменить состав заказа после оформления?',
    text: 'Пока заказ не передан в доставку, состав можно изменить в личном кабинете. После передачи курьеру изменения принимает только служба поддержки.'
  },
  {
    title: 'Сколько идёт доставка в регионы?',
    text: 'От трёх до семи рабочих дней в зависимости от региона. Точный срок появится на странице заказа после сборки.'
  },
  {
    title: 'Как вернуть товар?',
    text: 'Оставьте заявку на возврат в течение 14 дней после получения. Деньги вернутся тем же способом, которым вы платили.'
  }
];
</script>

<template>
  <CdsExpandablePanels variant="accordion" class="m-auto max-w-[560px]">
    <CdsExpandablePanel
      v-for="question in questions"
      :key="question.title"
      :title="question.title"
      :text="question.text"
    />
  </CdsExpandablePanels>
</template>

Форма с итогами

Заголовок показывает текущее значение, а раскрытая панель — поле для его изменения. Слот default заголовка получает expanded, поэтому подпись можно менять на лету. Такая форма занимает мало места и не прячет от пользователя то, что он уже заполнил.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDatePicker,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsSelect,
  CdsTextInput
} from '@central-design-system/components';
import { computed, ref, unref } from 'vue';

const name = ref('На Байкал');
const selected = ref('third');
const dateRange = ref({ from: '01.01.2026', to: '10.01.2026' });

const items = ref([
  { title: 'Москва', value: 'first' },
  { title: 'Санкт-Петербург', value: 'second' },
  { title: 'Иркутск', value: 'third' }
]);

const cityName = computed(() => unref(items).find((item) => item.value === unref(selected))?.title);
</script>

<template>
  <CdsExpandablePanels class="m-auto max-w-[500px]">
    <CdsExpandablePanel>
      <CdsExpandablePanelTitle expand-icon="edit" collapse-icon="minus">
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Название путешествия</span>
            <span :class="['text-content-secondary', { italic: expanded }]">{{ name }}</span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <CdsTextInput v-model="name" hide-messages label="Название" placeholder="Введите название" />
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle expand-icon="pin" collapse-icon="minus">
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Город поездки</span>
            <span :class="['text-content-secondary', { italic: expanded }]">{{ cityName }}</span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <CdsSelect v-model="selected" :items="items" placeholder="Выберите город" hide-messages />
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle expand-icon="time" collapse-icon="minus">
        <template #default="{ expanded }">
          <div class="flex flex-col gap-0.5">
            <span>Даты поездки</span>
            <span :class="['text-content-secondary', { italic: expanded }]">
              {{ dateRange.from }}—{{ dateRange.to }}
            </span>
          </div>
        </template>
      </CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <CdsDatePicker v-model="dateRange" range />
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>
  </CdsExpandablePanels>
</template>

Фильтры в сайдбаре

Группы фильтров в боковой панели: multiple держит открытыми нужные секции, transparent убирает лишний фон, а бейдж в заголовке показывает, сколько условий выбрано в свёрнутой группе.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsBadge,
  CdsCheckbox,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle
} from '@central-design-system/components';
import { computed, ref } from 'vue';

const documents = [
  { name: 'Договор поставки № 14', type: 'Договор', status: 'Подписан' },
  { name: 'Счёт № 209', type: 'Счёт', status: 'Черновик' },
  { name: 'Акт сверки за июнь', type: 'Акт', status: 'Подписан' },
  { name: 'Договор аренды № 7', type: 'Договор', status: 'Черновик' },
  { name: 'Счёт № 218', type: 'Счёт', status: 'Подписан' }
];

const types = ['Договор', 'Счёт', 'Акт'];
const statuses = ['Подписан', 'Черновик'];

const selectedTypes = ref<string[]>(['Договор']);
const selectedStatuses = ref<string[]>([]);

const filtered = computed(() =>
  documents.filter(
    (document) =>
      (!selectedTypes.value.length || selectedTypes.value.includes(document.type)) &&
      (!selectedStatuses.value.length || selectedStatuses.value.includes(document.status))
  )
);
</script>

<template>
  <div class="m-auto flex w-[520px] max-w-full gap-4">
    <CdsExpandablePanels appearance="transparent" multiple :model-value="[0, 1]" class="w-[220px] shrink-0">
      <CdsExpandablePanel>
        <CdsExpandablePanelTitle>
          <div class="flex w-full items-center gap-1">
            <span>Тип</span>
            <CdsBadge v-if="selectedTypes.length" inline :content="selectedTypes.length" />
          </div>
        </CdsExpandablePanelTitle>

        <CdsExpandablePanelContent>
          <div class="flex flex-col gap-1">
            <CdsCheckbox
              v-for="type in types"
              :key="type"
              v-model="selectedTypes"
              :value="type"
              :label="type"
              hide-messages
            />
          </div>
        </CdsExpandablePanelContent>
      </CdsExpandablePanel>

      <CdsExpandablePanel>
        <CdsExpandablePanelTitle>
          <div class="flex w-full items-center gap-1">
            <span>Статус</span>
            <CdsBadge v-if="selectedStatuses.length" inline :content="selectedStatuses.length" />
          </div>
        </CdsExpandablePanelTitle>

        <CdsExpandablePanelContent>
          <div class="flex flex-col gap-1">
            <CdsCheckbox
              v-for="status in statuses"
              :key="status"
              v-model="selectedStatuses"
              :value="status"
              :label="status"
              hide-messages
            />
          </div>
        </CdsExpandablePanelContent>
      </CdsExpandablePanel>
    </CdsExpandablePanels>

    <ul class="m-0 flex list-none flex-col gap-1 p-0">
      <li v-for="document in filtered" :key="document.name">{{ document.name }}</li>
      <li v-if="!filtered.length" class="text-content-secondary">Ничего не найдено</li>
    </ul>
  </div>
</template>

Пошаговое заполнение

Слот группы отдаёт next и prev — кнопки внутри панели переводят пользователя на следующий шаг, а mandatory не даёт закрыть все шаги сразу. Для длинных мастеров с валидацией шагов возьмите CdsSteps.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsExpandablePanel,
  CdsExpandablePanelContent,
  CdsExpandablePanels,
  CdsExpandablePanelTitle,
  CdsSelect,
  CdsTextInput
} from '@central-design-system/components';
import { ref } from 'vue';

const step = ref(0);

const company = ref('');
const city = ref('first');
const contact = ref('');

const cities = [
  { title: 'Москва', value: 'first' },
  { title: 'Санкт-Петербург', value: 'second' },
  { title: 'Новосибирск', value: 'third' }
];
</script>

<template>
  <CdsExpandablePanels
    v-model="step"
    v-slot="{ next, prev }"
    variant="accordion"
    mandatory
    class="m-auto max-w-[500px]"
  >
    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>Шаг 1. Организация</CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col items-start gap-2">
          <CdsTextInput v-model="company" label="Название организации" hide-messages class="w-full" />
          <CdsButton text="Далее" @click="next" />
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>Шаг 2. Адрес</CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col items-start gap-2">
          <CdsSelect v-model="city" :items="cities" label="Город" hide-messages class="w-full" />

          <div class="flex gap-2">
            <CdsButton appearance="secondary" text="Назад" @click="prev" />
            <CdsButton text="Далее" @click="next" />
          </div>
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>

    <CdsExpandablePanel>
      <CdsExpandablePanelTitle>Шаг 3. Контакт</CdsExpandablePanelTitle>

      <CdsExpandablePanelContent>
        <div class="flex flex-col items-start gap-2">
          <CdsTextInput v-model="contact" label="Контактное лицо" hide-messages class="w-full" />

          <div class="flex gap-2">
            <CdsButton appearance="secondary" text="Назад" @click="prev" />
            <CdsButton text="Отправить" />
          </div>
        </div>
      </CdsExpandablePanelContent>
    </CdsExpandablePanel>
  </CdsExpandablePanels>
</template>

API

CdsExpandablePanels

Пропсы

Имя	Тип	По умолчанию	Описание
appearance	"primary" | "secondary" | "transparent" | undefined	'primary'	Внешний вид панелей
collapseIcon	IconValue | undefined	'chevron-up'	Иконка сворачивания панели
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
expandIcon	IconValue | undefined	'chevron-down'	Иконка раскрытия панели
focusable	boolean | undefined	—	Подсвечивать заголовок фоном при фокусе
gap	string | number | undefined	—	Отступ между панелями
hideActions	boolean | undefined	—	Скрыть иконку раскрытия/сворачивания
hover	boolean | undefined	true	Подсвечивать заголовок фоном при наведении курсора
mandatory	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
max	number | undefined	—	Максимальное количество выбираемых элементов
modelValue	any	—	Значение выбранных элементов группы
multiple	boolean | undefined	—	Разрешить множественный выбор
readonly	boolean | null | undefined	null	Только для чтения
required	boolean | "force" | undefined	—	Обязательный выбор хотя бы одного элемента
selectedClass	string | undefined	—	CSS класс для выбранного состояния
static	boolean | undefined	—	Отключить анимацию заголовка
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
theme	string | undefined	—	Тема компонента
variant	"default" | "accordion" | undefined	'default'	Вариант отображения группы панелей

События

Имя	Тип	Описание
update:modelValue	[value: unknown]	Срабатывает при изменении выбранных панелей.

Слоты

Имя	Тип	Описание
default	CdsExpandablePanelsSlotProps	Панели группы. В аргументах слота доступна навигация по панелям.

Exposed

Имя	Тип	Описание
next	() => void	Раскрыть следующую панель
prev	() => void	Раскрыть предыдущую панель

CdsExpandablePanel

Пропсы

Имя	Тип	По умолчанию	Описание
collapseIcon	IconValue | undefined	'chevron-up'	Иконка сворачивания панели
disabled	boolean | null | undefined	null	Заблокированное состояние
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.
expandIcon	IconValue | undefined	'chevron-down'	Иконка раскрытия панели
focusable	boolean | undefined	—	Подсвечивать заголовок фоном при фокусе
height	string | number | undefined	—	Высота компонента
hideActions	boolean | undefined	—	Скрыть иконку раскрытия/сворачивания
hover	boolean | undefined	true	Подсвечивать заголовок фоном при наведении курсора
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
readonly	boolean | null | undefined	null	Только для чтения
selectedClass	string | undefined	—	CSS класс для выбранного состояния
static	boolean | undefined	—	Отключить анимацию заголовка
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
text	string | undefined	—	Текст раскрываемого содержимого панели
title	string | undefined	—	Текст заголовка панели
value	any	—	Значение компонента в группе
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
group:selected	[value: { value: boolean; }]	Срабатывает при раскрытии/сворачивании панели.

Слоты

Имя	Тип	Описание
default	any	Произвольное содержимое панели.
text	any	Раскрываемое содержимое панели.
title	any	Содержимое заголовка панели.

Exposed

Имя	Тип	Описание
isSelected	boolean	Панель раскрыта
select	(value: boolean) => void	Раскрыть/свернуть панель
toggle	() => void	Переключить раскрытие панели

CdsExpandablePanelTitle

Пропсы

Имя	Тип	По умолчанию	Описание
collapseIcon	IconValue | undefined	'chevron-up'	Иконка сворачивания панели
expandIcon	IconValue | undefined	'chevron-down'	Иконка раскрытия панели
focusable	boolean | undefined	—	Подсвечивать заголовок фоном при фокусе
height	string | number | undefined	—	Высота компонента
hideActions	boolean | undefined	—	Скрыть иконку раскрытия/сворачивания
hover	boolean | undefined	true	Подсвечивать заголовок фоном при наведении курсора
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
readonly	boolean | null | undefined	null	Только для чтения
static	boolean | undefined	—	Отключить анимацию заголовка
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
action	CdsExpandablePanelTitleSlotProps	Иконка раскрытия/сворачивания. В аргументах слота доступно состояние панели.
default	CdsExpandablePanelTitleSlotProps	Содержимое заголовка. В аргументах слота доступно состояние панели.

Exposed

Имя	Тип	Описание
isSelected	boolean	Панель раскрыта
toggle	() => void	Переключить раскрытие панели

CdsExpandablePanelContent

Пропсы

Имя	Тип	По умолчанию	Описание
eager	boolean | undefined	—	Принудительно рендерит содержимое компонента при его использовании. Это полезно, если у вас есть контент, который не отображается в DOM, но который необходимо проиндексировать для SEO.

Слоты

Имя	Тип	Описание
default	any	Раскрываемое содержимое панели.