Для выбора значения в форме возьмите CdsSelect, для дерева с чекбоксами, асинхронной подгрузкой и перетаскиванием — CdsTree, для табличных данных со столбцами — CdsTable. Внутри CdsMenu, CdsSelect и CdsAutocomplete список уже используется — там его не нужно собирать вручную.

Анатомия

Первая схема — каркас списка: подзаголовки делят его на разделы, разделители отбивают блоки, группы раскрывают вложенные элементы. Вторая — устройство элемента: зоны prepend и append по краям и три текстовых блока между ними. Каждая зона доступна и как проп (prepend-icon, title), и как одноимённый слот.

Storybook

Вариации

Данные списка

Свойство items принимает массив объектов и строит из него весь список. Поле title даёт заголовок, value — значение элемента (по нему список понимает, что выбрано), props — любые пропсы CdsListItem.

Sandbox Storybook

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

const items = [
  { title: 'Профиль', value: 'profile', props: { prependIcon: 'user' } },
  { title: 'Организация', value: 'company', props: { prependIcon: 'company' } },
  { title: 'Сотрудники', value: 'employees', props: { prependIcon: 'user-group' } },
  { title: 'Настройки', value: 'settings', props: { prependIcon: 'settings' } }
];
</script>

<template>
  <CdsList class="m-auto w-[200px]" :items="items" />
</template>

Когда данные приходят с сервера в своём формате, не перекладывайте их: item-title, item-value и item-children указывают, какие поля брать. Каждое из них принимает и имя поля, и функцию — так, например, item-props собирает пропсы элемента из нескольких полей объекта.

Sandbox Storybook

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

const employees = [
  { id: 1, name: 'Анна Смирнова', role: 'Руководитель отдела закупок' },
  { id: 2, name: 'Дмитрий Орлов', role: 'Менеджер по тендерам' },
  { id: 3, name: 'Елена Васильева', role: 'Юрист' },
  { id: 4, name: 'Игорь Крылов', role: 'Бухгалтер' }
];
</script>

<template>
  <CdsList
    class="m-auto w-[250px]"
    :items="employees"
    item-title="name"
    item-value="id"
    :item-props="(item: Record<string, any>) => ({ subtitle: item.role, prependIcon: 'user' })"
    lines="two"
  />
</template>

Поле props настраивает отдельный элемент: добавляет иконки, включает активное состояние или отключает строку.

Sandbox Storybook

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

const items = [
  { title: 'Черновик', value: 'draft', props: { prependIcon: 'file' } },
  { title: 'На согласовании', value: 'review', props: { prependIcon: 'time', appendIcon: 'chevron-right' } },
  { title: 'Опубликован', value: 'published', props: { prependIcon: 'check', active: true } },
  { title: 'В архиве', value: 'archived', props: { prependIcon: 'archive', disabled: true } }
];
</script>

<template>
  <CdsList class="m-auto w-[280px]" :items="items" />
</template>

Содержимое элемента

У элемента три текстовых блока: title называет запись, subtitle уточняет, description добавляет пояснение. По краям встают иконка (prepend-icon, append-icon) или аватар (prepend-avatar, append-avatar).

Sandbox Storybook

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

<template>
  <CdsList class="m-auto w-[360px]" :lines="false">
    <CdsListItem prepend-icon="file" title="Счёт на оплату № 5512" />

    <CdsListItem prepend-icon="file" title="Договор аренды № 17" subtitle="ООО «Ромашка»" />

    <CdsListItem
      prepend-icon="file"
      append-icon="chevron-right"
      title="Акт сверки за март"
      subtitle="ООО «Ромашка»"
      description="Ожидает подписания второй стороной"
    />

    <CdsListItem
      prepend-avatar="https://i.pravatar.cc/80?img=47"
      title="Анна Смирнова"
      subtitle="Руководитель отдела закупок"
    />
  </CdsList>
</template>

Свойство lines ограничивает подзаголовок и описание одной, двумя или тремя строками — остальной текст обрезается многоточием, и записи с разной длиной текста держат общий ритм. У three иконки в зонах prepend и append выравниваются по верху записи, а не по центру. :lines="false" снимает ограничение — текст займёт столько строк, сколько нужно.

Sandbox Storybook

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

const lines = ['one', 'two', 'three'] as const;

const items = [
  {
    title: 'Договор поставки № 42 от 14 марта',
    value: 'supply',
    props: {
      prependIcon: 'file',
      subtitle:
        'ООО «Ромашка» · поставка канцелярии и расходных материалов для филиалов в Москве и Санкт-Петербурге до конца квартала'
    }
  },
  {
    title: 'Акт сверки взаиморасчётов за март',
    value: 'act',
    props: {
      prependIcon: 'file',
      subtitle: 'ООО «Василёк» · расхождений не выявлено, подписан обеими сторонами 12 марта'
    }
  }
];
</script>

<template>
  <div class="m-auto flex flex-wrap justify-center gap-4">
    <div v-for="line of lines" :key="line" class="flex w-[280px] flex-col gap-1">
      <span class="text-100 text-content-secondary">lines="{{ line }}"</span>
      <CdsList :items="items" :lines="line" />
    </div>
  </div>
</template>

Структура

Элементы с type: 'subheader' и type: 'divider' делят список на разделы: подзаголовок называет группу записей, разделитель отбивает блоки без заголовка.

Sandbox Storybook

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

const items = [
  { type: 'subheader', title: 'Сегодня' },
  { title: 'Договор поставки № 42', value: 'supply', props: { prependIcon: 'file' } },
  { title: 'Счёт на оплату № 5512', value: 'invoice', props: { prependIcon: 'file' } },
  { type: 'divider' },
  { type: 'subheader', title: 'На прошлой неделе' },
  { title: 'Акт сверки за март', value: 'act', props: { prependIcon: 'file' } },
  { title: 'Договор аренды № 17', value: 'rent', props: { prependIcon: 'file' } },
  { title: 'Спецификация № 3', value: 'spec', props: { prependIcon: 'file' } }
];
</script>

<template>
  <CdsList class="m-auto w-[250px]" :items="items" />
</template>

Массив children внутри элемента превращает его в раскрывающуюся группу — список сам управляет её состоянием, а v-model:opened даёт им управлять снаружи. Вложенность не ограничена одним уровнем.

Sandbox Storybook

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

const opened = ref(['contracts']);

const items = [
  { title: 'Все документы', value: 'all', props: { prependIcon: 'folder' } },
  {
    title: 'Договоры',
    value: 'contracts',
    props: { prependIcon: 'folder' },
    children: [
      { title: 'Поставка', value: 'supply', props: { prependIcon: 'file' } },
      { title: 'Аренда', value: 'rent', props: { prependIcon: 'file' } },
      {
        title: 'Услуги',
        value: 'services',
        props: { prependIcon: 'folder' },
        children: [
          { title: 'Разовые', value: 'services-single', props: { prependIcon: 'file' } },
          { title: 'Абонентские', value: 'services-regular', props: { prependIcon: 'file' } }
        ]
      }
    ]
  },
  {
    title: 'Бухгалтерия',
    value: 'accounting',
    props: { prependIcon: 'folder' },
    children: [
      { title: 'Счета', value: 'invoices', props: { prependIcon: 'file' } },
      { title: 'Акты сверки', value: 'acts', props: { prependIcon: 'file' } }
    ]
  }
];
</script>

<template>
  <CdsList v-model:opened="opened" class="m-auto w-[250px]" :items="items" />
</template>

Выбор и активация

Свойство activatable подсвечивает один элемент как текущий — это про навигацию: «вы сейчас здесь». selectable включает выбор записей — это про данные: «эти отправить». Оба состояния читаются через v-model:activated и v-model:selected, а select-strategy задаёт, сколько элементов можно выбрать одновременно: single-leaf (по умолчанию) — один, independent — сколько угодно.

Sandbox Storybook

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

const items = [
  { title: 'Договоры', value: 'contracts' },
  { title: 'Счета', value: 'invoices' },
  { title: 'Акты сверки', value: 'acts' },
  { title: 'Отчёты', value: 'reports' }
];

const activated = ref(['contracts']);
const selected = ref(['invoices', 'acts']);
</script>

<template>
  <div class="m-auto flex flex-wrap justify-center gap-4">
    <div class="flex w-[260px] flex-col gap-1">
      <span class="text-100 text-content-secondary">activatable — один активный элемент</span>
      <CdsList v-model:activated="activated" activatable :items="items" />
      <span class="text-100 text-content-secondary">activated: {{ activated }}</span>
    </div>

    <div class="flex w-[260px] flex-col gap-1">
      <span class="text-100 text-content-secondary">selectable + select-strategy="independent"</span>
      <CdsList v-model:selected="selected" selectable select-strategy="independent" :items="items" />
      <span class="text-100 text-content-secondary">selected: {{ selected }}</span>
    </div>
  </div>
</template>

Внешний вид

nav скругляет активные элементы — вид бокового меню. slim убирает внутренние отступы, когда список лежит в узкой панели или выпадающем меню. color задаёт цвет активных элементов, bg-color — фон списка.

Sandbox Storybook

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

const items = [
  { title: 'Профиль', value: 'profile', props: { prependIcon: 'user' } },
  { title: 'Организация', value: 'company', props: { prependIcon: 'company', active: true } },
  { title: 'Настройки', value: 'settings', props: { prependIcon: 'settings' } }
];
</script>

<template>
  <div class="m-auto flex flex-wrap justify-center gap-4">
    <div class="flex w-[240px] flex-col gap-1">
      <span class="text-100 text-content-secondary">по умолчанию</span>
      <CdsList :items="items" />
    </div>

    <div class="flex w-[240px] flex-col gap-1">
      <span class="text-100 text-content-secondary">nav</span>
      <CdsList nav :items="items" />
    </div>

    <div class="flex w-[240px] flex-col gap-1">
      <span class="text-100 text-content-secondary">slim</span>
      <CdsList slim :items="items" />
    </div>

    <div class="flex w-[240px] flex-col gap-1">
      <span class="text-100 text-content-secondary">color="brand-primary"</span>
      <CdsList color="brand-primary" :items="items" />
    </div>
  </div>
</template>

Сборка из компонентов

Когда строка сложнее заголовка с иконкой, соберите её из CdsListItem вручную — слоты принимают любые компоненты: теги, бейджи, аватары, кнопки.

Имя слота	Описание
prepend	Содержимое зоны перед текстом
title	Содержимое заголовка (замещает title)
subtitle	Содержимое подзаголовка (замещает subtitle)
description	Содержимое описания (замещает description)
append	Содержимое зоны после текста
default	Произвольная разметка внутри элемента, под текстом

Sandbox Storybook

<script setup lang="ts">
import {
  CdsAvatar,
  CdsBadge,
  CdsFunctionalButton,
  CdsIcon,
  CdsList,
  CdsListItem,
  CdsTag
} from '@central-design-system/components';
</script>

<template>
  <CdsList class="m-auto w-[300px]" lines="two">
    <CdsListItem value="supply">
      <template #prepend>
        <CdsIcon name="file" />
      </template>
      <template #title>Договор поставки № 42</template>
      <template #subtitle>ООО «Ромашка»</template>
      <template #append>
        <CdsTag size="sm" text="Подписан" color="green" />
      </template>
    </CdsListItem>

    <CdsListItem value="act">
      <template #prepend>
        <CdsIcon name="file" />
      </template>
      <template #title>Акт сверки за март</template>
      <template #subtitle>ООО «Василёк»</template>
      <template #append>
        <CdsBadge inline content="3" />
      </template>
    </CdsListItem>

    <CdsListItem value="manager">
      <template #prepend>
        <CdsAvatar size="sm" image="https://i.pravatar.cc/80?img=47" />
      </template>
      <template #title>Анна Смирнова</template>
      <template #subtitle>Ответственная за закупку</template>
      <template #append>
        <CdsFunctionalButton icon="more-vertical" aria-label="Ещё" />
      </template>
    </CdsListItem>
  </CdsList>
</template>

Вложенность в этом режиме собирается через CdsListGroup: слот activator отдаёт заголовок группы, содержимое по умолчанию — вложенные элементы. Проп subgroup помечает группу третьего и следующих уровней — стрелка раскрытия переезжает к началу строки.

Стрелку группа передаёт активатору как значение по умолчанию для append-icon, а слот append замещает эту зону целиком — поэтому со своим содержимым стрелка пропадёт. Верните её пустым <CdsIcon /> рядом: иконка возьмёт направление стрелки из дефолтов группы и продолжит переключаться при раскрытии.

Sandbox Storybook

<script setup lang="ts">
import { CdsBadge, CdsIcon, CdsList, CdsListGroup, CdsListItem } from '@central-design-system/components';
</script>

<template>
  <CdsList class="m-auto w-[250px]">
    <CdsListItem value="all">
      <template #prepend>
        <CdsIcon name="folder" />
      </template>
      <template #title>Все документы</template>
    </CdsListItem>

    <CdsListGroup value="contracts">
      <template #activator="{ props }">
        <CdsListItem v-bind="props" value="contracts">
          <template #prepend>
            <CdsIcon name="folder" />
          </template>
          <template #title>Договоры</template>
          <template #append>
            <CdsBadge class="mr-2" inline content="12" />
            <CdsIcon />
          </template>
        </CdsListItem>
      </template>

      <CdsListItem value="supply">
        <template #prepend>
          <CdsIcon name="file" />
        </template>
        <template #title>Поставка</template>
      </CdsListItem>

      <CdsListItem value="rent">
        <template #prepend>
          <CdsIcon name="file" />
        </template>
        <template #title>Аренда</template>
      </CdsListItem>

      <CdsListGroup value="services" subgroup>
        <template #activator="{ props }">
          <CdsListItem v-bind="props" value="services">
            <template #title>Услуги</template>
          </CdsListItem>
        </template>

        <CdsListItem value="services-single">
          <template #prepend>
            <CdsIcon name="file" />
          </template>
          <template #title>Разовые</template>
        </CdsListItem>

        <CdsListItem value="services-regular">
          <template #prepend>
            <CdsIcon name="file" />
          </template>
          <template #title>Абонентские</template>
        </CdsListItem>
      </CdsListGroup>
    </CdsListGroup>

    <CdsListGroup value="accounting">
      <template #activator="{ props }">
        <CdsListItem v-bind="props" value="accounting">
          <template #prepend>
            <CdsIcon name="folder" />
          </template>
          <template #title>Бухгалтерия</template>
        </CdsListItem>
      </template>

      <CdsListItem value="invoices">
        <template #prepend>
          <CdsIcon name="file" />
        </template>
        <template #title>Счета</template>
      </CdsListItem>

      <CdsListItem value="acts">
        <template #prepend>
          <CdsIcon name="file" />
        </template>
        <template #title>Акты сверки</template>
      </CdsListItem>
    </CdsListGroup>
  </CdsList>
</template>

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

Storybook

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

Меню разделов

Боковое меню — это activatable плюс nav: активен ровно один пункт, mandatory запрещает снять выделение, а v-model:activated держит текущий раздел в состоянии приложения. Подзаголовки делят пункты на смысловые блоки.

Sandbox Storybook

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

const activated = ref(['contracts']);

const items: { type?: string; title: string; value?: string; props?: Record<string, unknown> }[] = [
  { type: 'subheader', title: 'Работа' },
  { title: 'Закупки', value: 'purchases', props: { prependIcon: 'shopping-cart' } },
  { title: 'Договоры', value: 'contracts', props: { prependIcon: 'file' } },
  { title: 'Поставщики', value: 'suppliers', props: { prependIcon: 'company' } },
  { type: 'subheader', title: 'Настройки' },
  { title: 'Сотрудники', value: 'employees', props: { prependIcon: 'user-group' } },
  { title: 'Уведомления', value: 'notifications', props: { prependIcon: 'notification' } }
];

const current = computed(() => items.find((item) => item.value === activated.value[0])?.title ?? 'ничего');
</script>

<template>
  <div class="m-auto flex w-[250px] flex-col gap-2">
    <CdsList v-model:activated="activated" activatable nav mandatory :items="items" />

    <span class="text-100 text-content-secondary">Открыт раздел: {{ current }}</span>
  </div>
</template>

Список документов с действиями

Строка целиком остаётся кликабельной, а действие в зоне append работает поверх неё — поэтому у кнопки стоит @click.stop, иначе клик дойдёт до элемента и выделит его. Статус рядом с кнопкой — обычный CdsTag.

Sandbox Storybook

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

const documents = ref([
  { id: 1, title: 'Договор поставки № 42', company: 'ООО «Ромашка»', status: 'Подписан' },
  { id: 2, title: 'Акт сверки за март', company: 'ООО «Василёк»', status: 'На согласовании' },
  { id: 3, title: 'Счёт на оплату № 5512', company: 'ООО «Ромашка»', status: 'Черновик' }
]);

const removed = ref<string[]>([]);

function remove(id: number) {
  const document = documents.value.find((item) => item.id === id);
  if (!document) return;

  removed.value = [...removed.value, document.title];
  documents.value = documents.value.filter((item) => item.id !== id);
}
</script>

<template>
  <div class="m-auto flex w-[380px] flex-col gap-2">
    <CdsList lines="two">
      <CdsListItem
        v-for="document of documents"
        :key="document.id"
        :value="document.id"
        prepend-icon="file"
        :title="document.title"
        :subtitle="document.company"
      >
        <template #append>
          <div class="flex items-center gap-2">
            <CdsTag size="sm" :text="document.status" />
            <CdsFunctionalButton icon="delete" aria-label="Удалить документ" @click.stop="remove(document.id)" />
          </div>
        </template>
      </CdsListItem>
    </CdsList>

    <span v-if="removed.length" class="text-100 text-content-secondary">Удалено: {{ removed.join(', ') }}</span>
  </div>
</template>

Выбор получателей

Слот prepend получает isSelected и select — состояние выбора и функцию, которая его меняет. Это позволяет показать чекбокс, оставив клик по всей строке: CdsListItemAction выравнивает его по сетке элемента, а CdsAvatar встаёт следом.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar, CdsCheckbox, CdsList, CdsListItem, CdsListItemAction } from '@central-design-system/components';
import { computed, ref } from 'vue';

const people = [
  { name: 'Анна Смирнова', email: 'a.smirnova@example.com', image: 'https://i.pravatar.cc/80?img=47' },
  { name: 'Дмитрий Орлов', email: 'd.orlov@example.com', image: 'https://i.pravatar.cc/80?img=12' },
  { name: 'Елена Васильева', email: 'e.vasileva@example.com', image: 'https://i.pravatar.cc/80?img=44' },
  { name: 'Игорь Крылов', email: 'i.krylov@example.com', image: 'https://i.pravatar.cc/80?img=32' }
];

const selected = ref(['a.smirnova@example.com']);

const summary = computed(() =>
  selected.value.length ? `Выбрано получателей: ${selected.value.length}` : 'Получатели не выбраны'
);
</script>

<template>
  <div class="m-auto flex w-[300px] flex-col gap-2">
    <CdsList v-model:selected="selected" selectable select-strategy="independent" lines="two">
      <CdsListItem v-for="person of people" :key="person.email" :value="person.email" :title="person.name">
        <template #prepend="{ isSelected, select }">
          <CdsListItemAction start>
            <CdsCheckbox :model-value="isSelected" hide-details tabindex="-1" @update:model-value="select" />
          </CdsListItemAction>

          <CdsAvatar size="sm" :image="person.image" />
        </template>

        <template #subtitle>{{ person.email }}</template>
      </CdsListItem>
    </CdsList>

    <span class="text-100 text-content-secondary">{{ summary }}</span>
  </div>
</template>

Поиск по списку

Список перестраивается из отфильтрованного массива — отдельная логика ему не нужна. Когда совпадений нет, вместо пустого списка показывается CdsEmptyState: пользователь понимает, что дело в запросе, а не в загрузке.

Sandbox Storybook

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

const query = ref('');

const suppliers = [
  { title: 'ООО «Ромашка»', value: 'romashka', props: { prependIcon: 'company', subtitle: 'Канцелярия' } },
  { title: 'ООО «Василёк»', value: 'vasilek', props: { prependIcon: 'company', subtitle: 'Логистика' } },
  {
    title: 'АО «Северсталь-Комплект»',
    value: 'severstal',
    props: { prependIcon: 'company', subtitle: 'Металлопрокат' }
  },
  { title: 'ИП Кузнецов А. В.', value: 'kuznecov', props: { prependIcon: 'company', subtitle: 'Ремонт техники' } }
];

const filtered = computed(() =>
  suppliers.filter((supplier) => supplier.title.toLowerCase().includes(query.value.trim().toLowerCase()))
);
</script>

<template>
  <div class="m-auto flex w-[300px] flex-col gap-2">
    <CdsTextInput
      v-model="query"
      placeholder="Поиск по поставщикам"
      prepend-inner-icon="search"
      clearable
      hide-details
    />

    <CdsList v-if="filtered.length" :items="filtered" lines="two" />

    <CdsEmptyState v-else title="Ничего не найдено" description="Проверьте написание или очистите запрос" />
  </div>
</template>

API

CdsList

Пропсы

Имя	Тип	По умолчанию	Описание
activatable	boolean | undefined	—	Разрешает активацию элементов (выделение текущего элемента без режима выбора)
activated	any	—	Идентификаторы активных элементов (поддерживает v-model через update:activated)
activeClass	string | undefined	—	Класс, применяемый к элементам списка, когда они находятся в активном состоянии
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
activeStrategy	ActiveStrategyProp | undefined	—	Стратегия активации элементов (одиночная, множественная и т.д.)
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
collapseIcon	IconValue | undefined	—	Иконка, отображаемая у свёрнутой группы
color	string | undefined	—	Цвет компонента
disabled	boolean | null | undefined	null	Заблокированное состояние
expandIcon	IconValue | undefined	—	Иконка, отображаемая у раскрытой группы
filterable	boolean | undefined	—	FOR INTERNAL USE ONLY Включает режим фильтрации: пробел не выбирает элемент, а используется для ввода. Применимо в компонентах CdsCombobox, CdsAutocomplete
height	string | number | undefined	—	Высота компонента
indent	string | number | undefined	—	Величина отступа для вложенных групп элементов
itemChildren	SelectItemKey	'children'	Свойство объекта, содержащее дочерние элементы, либо функция для их получения
itemProps	SelectItemKey	'props'	Свойство объекта, содержащее пропсы для элемента, либо функция для их получения
items	any[] | undefined	[]	Массив элементов для отображения
itemsRegistration	ItemsRegistrationType | undefined	'render'	Стратегия регистрации элементов: render — по мере рендеринга, иначе единоразово
itemTitle	SelectItemKey	'title'	Свойство объекта, используемое как заголовок элемента, либо функция для его получения
itemType	SelectItemKey	'type'	Свойство объекта, определяющее тип элемента (item, divider, subheader), либо функция для его получения
itemValue	SelectItemKey	'value'	Свойство объекта, используемое как значение элемента, либо функция для его получения
lines	false | "one" | "two" | "three" | undefined	'one'	Количество строк в элементах списка, влияет на их высоту. false отключает фиксированную высоту
mandatory	boolean | undefined	—	Делает выбор обязательным: запрещает снимать выбор с последнего элемента
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
nav	boolean | undefined	—	Применяет стили навигационного списка (скруглённые активные элементы)
navigationIndex	number | undefined	—	Индекс текущего элемента при клавиатурной навигации (поддерживает v-model)
navigationStrategy	"focus" | "track" | undefined	'focus'	Стратегия клавиатурной навигации: focus — перенос фокуса, track — виртуальный курсор
opened	any	—	Идентификаторы раскрытых групп (поддерживает v-model через update:opened)
openStrategy	OpenStrategyProp | undefined	'list'	Стратегия раскрытия групп (list, single, multiple)
prependGap	string | number | undefined	—	Отступ перед контентом элемента (резервируется место под prepend-иконку/аватар)
required	boolean | undefined	—	Делает выбор обязательным: запрещает снимать выбор с последнего элемента
returnObject	boolean | undefined	—	Возвращать в значении модели объект вместо массива
selectable	boolean | undefined	—	Разрешает выбор элементов
selected	any	—	Идентификаторы выбранных элементов (поддерживает v-model через update:selected)
selectStrategy	SelectStrategyProp | undefined	'single-leaf'	Стратегия выбора элементов (single-leaf, leaf, independent, classic и т.д.)
slim	boolean | undefined	—	Убирает внутренние отступы списка и контейнера меню: список полностью заполняет доступную область
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
valueComparator	ValueComparator | undefined	—	Функция сравнения значений элементов для определения выбранного состояния
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
click:activate	[value: { id: unknown; value: boolean; path: unknown[]; }]	Возникает при активации элемента. value — id элемента, его новое состояние и путь
click:open	[value: { id: unknown; value: boolean; path: unknown[]; }]	Возникает при клике по активатору группы. value — id группы, её новое состояние и путь
click:select	[value: { id: unknown; value: boolean; path: unknown[]; }]	Возникает при выборе элемента. value — id элемента, его новое состояние и путь
update:activated	[value: unknown]	Возникает при изменении набора активных элементов. value — идентификаторы активных элементов
update:navigationIndex	[value: unknown]	Возникает при изменении индекса клавиатурной навигации. value — новый индекс
update:opened	[value: unknown]	Возникает при изменении набора раскрытых групп. value — идентификаторы раскрытых групп
update:selected	[value: unknown]	Возникает при изменении набора выбранных элементов. value — идентификаторы выбранных элементов

Слоты

Имя	Тип	Описание
append	ListItemSlot & { item: unknown; }	Контент после текста элемента (на месте append-иконки/аватара)
default	ListItemSlot & { item: unknown; }	Контент по умолчанию внутри элемента Контент по умолчанию. Переопределяет автоматический рендеринг элементов из items
description	ListItemDescriptionSlot & { item: unknown; }	Контент описания элемента (отображается под заголовком и подзаголовком)
divider	{ props: { [key: string]: any; title: string; value: any; }; }	Кастомный рендеринг разделителя при использовании items
header	{ props: { [key: string]: any; title: string; value: any; }; }	Кастомный рендеринг активатора группы (заголовка) при использовании items
item	{ props: { [key: string]: any; title: string; value: any; } & { index: number; }; }	Кастомный рендеринг элемента списка при использовании items
prepend	ListItemSlot & { item: unknown; }	Контент перед текстом элемента (на месте prepend-иконки/аватара)
subheader	{ props: { [key: string]: any; title: string; value: any; }; }	Кастомный рендеринг подзаголовка при использовании items
subtitle	ListItemSubtitleSlot & { item: unknown; }	Контент подзаголовка элемента
title	ListItemTitleSlot & { item: unknown; }	Контент заголовка элемента

Exposed

Имя	Тип	Описание
children	Map<unknown, unknown[]>	Карта дочерних элементов по идентификаторам родителей
focus	(location?: number | "next" | "prev" | "first" | "last" | undefined) => void	Устанавливает фокус на элемент списка (по индексу или ключевому слову: next, prev, first, last)
getPath	(id: unknown) => unknown[]	Возвращает путь (массив идентификаторов) до элемента по его id
open	(id: unknown, value: boolean, event?: Event | undefined) => void	Раскрывает или сворачивает группу по её идентификатору
parents	Map<unknown, unknown>	Карта родительских элементов по идентификаторам дочерних
select	(id: unknown, value: boolean, event?: Event | undefined) => void	Выбирает или снимает выбор с элемента по его идентификатору

CdsListGroup

Пропсы

Имя	Тип	По умолчанию	Описание
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendIcon	IconValue | undefined	—	Иконка, отображаемая после заголовка группы
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
collapseIcon	IconValue | undefined	'chevron-up'	Иконка, отображаемая когда группа свёрнута
color	string | undefined	—	Цвет компонента
disabled	boolean | null | undefined	null	Заблокированное состояние
expandIcon	IconValue | undefined	'chevron-down'	Иконка, отображаемая когда группа раскрыта
fluid	boolean | undefined	—	Убирает отступ у активатора группы, выравнивая его по краю списка
prependIcon	IconValue | undefined	—	Иконка, отображаемая перед заголовком группы
rawId	string | number | undefined	—	Исходный идентификатор группы, используется для построения id DOM-элемента
subgroup	boolean | undefined	—	Помечает компонент как группу вложенных списков (подгруппу)
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
title	string | undefined	—	Заголовок группы, отображаемый в активаторе по умолчанию
value	any	—	Значение группы, используемое в логике раскрытия/выбора

Слоты

Имя	Тип	Описание
activator	CdsListGroupActivatorSlot	Активатор группы — заголовок, по клику на который группа раскрывается/сворачивается
default	any	Контент группы (вложенные элементы списка)

Exposed

Имя	Тип	Описание
isOpen	boolean	Признак того, что группа раскрыта

CdsListItem

Пропсы

Имя	Тип	По умолчанию	Описание
active	boolean | undefined	—	Принудительно задаёт активное состояние элемента
activeClass	string | undefined	—	Класс, применяемый к элементам списка, когда они находятся в активном состоянии
activeColor	string | undefined	—	Цвет компонента, когда он находится в активном состоянии
appendAvatar	string | undefined	—	Аватар (URL изображения), отображаемый после контента элемента
appendIcon	IconValue | undefined	—	Иконка, отображаемая после контента элемента
baseColor	string | undefined	—	Цвет неактивного компонента
bgColor	string | undefined	—	Цвет фона компонента
color	string | undefined	—	Цвет компонента
description	string | number | boolean | undefined	—	Описание элемента списка, отображаемое под заголовком и подзаголовком
disabled	boolean | null | undefined	null	Заблокированное состояние
exact	boolean | undefined	—	Если true, активное состояние будет применяться только при точном совпадении маршрута
height	string | number | undefined	—	Высота компонента
href	string | undefined	—	Атрибут href для ссылки. Если указан, компонент будет вести себя как обычная ссылка
index	number | undefined	—	Индекс элемента, используется для клавиатурной навигации
lines	false | "one" | "two" | "three" | undefined	'one'	Количество строк в элементах списка, влияет на их высоту. false отключает фиксированную высоту
link	boolean | undefined	—	Делает элемент кликабельной ссылкой. Определяется автоматически при наличии href/to
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
nav	boolean | undefined	—	Применяет стили навигационного списка (скруглённые активные элементы)
prependAvatar	string | undefined	—	Аватар (URL изображения), отображаемый перед контентом элемента
prependGap	string | number | undefined	—	Отступ перед контентом элемента (резервируется место под prepend-иконку/аватар)
prependIcon	IconValue | undefined	—	Иконка, отображаемая перед контентом элемента
replace	boolean | undefined	—	Если true, навигация по маршруту будет заменять текущую запись в истории вместо добавления новой
slim	boolean | undefined	—	Убирает внутренние отступы списка и контейнера меню: список полностью заполняет доступную область
subtitle	string | number | boolean | undefined	—	Подзаголовок элемента, отображаемый под заголовком
tabindex	string | number | undefined	—	Значение атрибута tabindex элемента
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
textColor	string | undefined	—	Цвет текста компонента
theme	string | undefined	—	Тема компонента
title	string | number | boolean | undefined	—	Заголовок элемента, отображаемый в компоненте
to	LinkTo | undefined	—	Маршрут назначения или объект для RouterLink. Если указан, компонент будет вести себя как RouterLink
value	any	—	Значение элемента, используемое при выборе/активации в списке
width	string | number | undefined	—	Ширина компонента

События

Имя	Тип	Описание
click	[value: MouseEvent | KeyboardEvent]	Возникает при клике по элементу списка

Слоты

Имя	Тип	Описание
append	ListItemSlot	Контент после текста элемента (на месте append-иконки/аватара)
default	ListItemSlot	Контент по умолчанию внутри элемента
description	ListItemDescriptionSlot	Контент описания элемента (отображается под заголовком и подзаголовком)
prepend	ListItemSlot	Контент перед текстом элемента (на месте prepend-иконки/аватара)
subtitle	ListItemSubtitleSlot	Контент подзаголовка элемента
title	ListItemTitleSlot	Контент заголовка элемента

Exposed

Имя	Тип	Описание
activate	(activated: boolean, e?: Event | undefined) => void	Активирует или деактивирует элемент
isActivated	boolean	Признак того, что элемент находится в активном состоянии
isGroupActivator	boolean | undefined	Признак того, что элемент является активатором группы
isSelected	boolean	Признак того, что элемент выбран
list	{ filterable: MaybeRefOrGetter<boolean>; hasPrepend: Ref<boolean, boolean>; updateHasPrepend: (value: boolean) => void; trackingIndex: Ref<number, number>; navigationStrategy: Ref<"focus" | "track", "focus" | "track">; uid: string; } | null	Контекст родительского списка (CdsList)
root	NestedRoot	Корневой контекст вложенности (root) родительского списка
select	(selected: boolean, e?: Event | undefined) => void	Выбирает или снимает выбор с элемента

CdsListItemAction

Пропсы

Имя	Тип	По умолчанию	Описание
end	boolean | undefined	—	Размещает действие в конце элемента списка (после контента)
start	boolean | undefined	—	Размещает действие в начале элемента списка (перед контентом)
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Контент действия по умолчанию

CdsListItemDescription

Пропсы

Имя	Тип	По умолчанию	Описание
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

CdsListItemDivider

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет разделителя.
contentOffset	string | number | (string | number)[] | undefined	—	Увеличивает интервал между элементами контента и строками. Если передается в виде массива, второе значение смещает содержимое слота вниз (или вправо если vertical = true).
gradient	boolean | undefined	—	Добавляет эффект затухания с обеих сторон.
inset	boolean | undefined	—	Добавляет отступ для обычных разделителей и уменьшает максимальную высоту для вертикальных разделителей.
length	string | number | undefined	—	Длина разделителя. Единица измерения по умолчанию — пиксели.
opacity	string | number | undefined	—	Прозрачность разделителя.
theme	string | undefined	—	Тема компонента
thickness	string | number | undefined	—	Толщина разделителя. Единица измерения по умолчанию — пиксели.
variant	"solid" | "dotted" | "dashed" | "double" | undefined	'solid'	Вариант отображения разделителя
vertical	boolean | undefined	—	Отображает разделитель вертикально

Слоты

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

CdsListItemImage

Пропсы

Имя	Тип	По умолчанию	Описание
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

CdsListItemMedia

Пропсы

Имя	Тип	По умолчанию	Описание
end	boolean | undefined	—	Размещает медиа в конце элемента списка (после контента)
start	boolean | undefined	—	Размещает медиа в начале элемента списка (перед контентом)
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

Слоты

Имя	Тип	Описание
default	any	Контент медиа по умолчанию

CdsListItemSubtitle

Пропсы

Имя	Тип	По умолчанию	Описание
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

CdsListItemTitle

Пропсы

Имя	Тип	По умолчанию	Описание
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения

CdsListSubheader

Пропсы

Имя	Тип	По умолчанию	Описание
color	string | undefined	—	Цвет текста подзаголовка
inset	boolean | undefined	—	Добавляет отступ слева, выравнивая текст с контентом элементов списка
sticky	boolean | undefined	—	Закрепляет подзаголовок вверху при прокрутке списка
tag	string | JSXComponent<any> | undefined	'div'	Пользовательский HTML-тег для отображения
title	string | undefined	—	Текст подзаголовка

Слоты

Имя	Тип	Описание
default	any	Контент подзаголовка по умолчанию (переопределяет проп title)