Для списка разделов внутри панели возьмите CdsList, для навигации по подразделам одной страницы — CdsTabs. Панель — часть каркаса CdsLayout, но, в отличие от остальных частей, работает и отдельно: со свойством fixed она прижимается к окну без макета.

Анатомия

Панель состоит из прокручиваемого списка навигации и двух закреплённых зон: prepend сверху — для логотипа или профиля, append снизу — для выхода и служебных ссылок. Свойство border рисует границы между зонами.

Storybook

Вариации

Постоянная панель

Свойство permanent держит панель на экране всегда. Без него панель прячется на экранах уже 1056 px — контенту остаётся вся ширина, а навигацию открывают по кнопке.

Sandbox Storybook

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

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer permanent border>
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Панель стоит в потоке макета: контент начинается сразу за ней и никогда не оказывается под панелью.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Скрываемая панель

Обычная панель подчиняется v-model на любой ширине экрана. На широком она стоит в макете, а закрытая отдаёт своё место контенту. На узком экране та же панель выезжает поверх контента. При переходе через 1056 px панель сама закрывается и открывается обратно; disable-resize-watcher отключает эту синхронизацию. Свойство width задаёт ширину в пикселях, и макет сдвигает контент ровно на неё.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDrawer,
  CdsFunctionalButton,
  CdsHeader,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
import { ref } from 'vue';

const open = ref<boolean | null>(null);
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsFunctionalButton
            icon="menu"
            class="mr-2"
            :aria-label="open ? 'Скрыть навигацию' : 'Показать навигацию'"
            @click="open = !open"
          />
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer v-model="open" border :width="280">
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            На широком экране панель стоит в макете и сдвигает контент. Скройте её кнопкой в шапке — контент займёт всю
            ширину. На узком экране та же панель выезжает поверх контента.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Временная панель

Свойство temporary превращает панель в выезжающую: она не занимает места в макете, открывается через v-model и закрывается кликом по затемнению или клавишей Esc. События @opened и @closed сообщают о смене состояния.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsDrawer,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage
} from '@central-design-system/components';
import { ref } from 'vue';

const open = ref(false);
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer v-model="open" temporary border>
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <CdsButton prepend-icon="menu" @click="open = true">Открыть навигацию</CdsButton>
          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Временная панель выезжает поверх контента и закрывается кликом по затемнению или клавишей Esc.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

На сенсорных экранах выезжающую панель можно вытянуть свайпом от края экрана и убрать свайпом обратно. Свойство touchless отключает жесты.

Без затемнения

Свойство scrim управляет затемнением под выезжающей панелью. false убирает его: контент под панелью остаётся кликабельным, но закрыть панель кликом мимо неё уже нельзя, поэтому дайте для этого свою кнопку. Строка вместо true задаёт цвет затемнения — передавайте его с прозрачностью, например rgb(0 0 0 / 0.3), иначе контент под панелью скроется целиком.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsDrawer,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage
} from '@central-design-system/components';
import { ref } from 'vue';

const open = ref(false);
const clicks = ref(0);
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer v-model="open" temporary right border :scrim="false">
        <CdsList>
          <CdsListItem title="Фильтр: активные" prepend-icon="adjust" />
          <CdsListItem title="Фильтр: архивные" prepend-icon="archive" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="flex flex-wrap gap-2">
            <CdsButton prepend-icon="adjust" @click="open = !open">
              {{ open ? 'Скрыть фильтры' : 'Показать фильтры' }}
            </CdsButton>
            <CdsButton variant="soft" color="brand" @click="clicks++">Кликов по контенту: {{ clicks }}</CdsButton>
          </div>
          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Панель без затемнения: контент под ней не блокируется, поэтому закрывать её нужно своей кнопкой.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Защита от случайного закрытия

Свойство persistent запрещает закрывать панель кликом по затемнению и клавишей Esc: закрыть её можно только через v-model. Подходит для панели с формой, где случайный клик мимо стёр бы ввод.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsDrawer,
  CdsLayout,
  CdsMain,
  CdsPage,
  CdsTextArea,
  CdsTextInput
} from '@central-design-system/components';
import { ref } from 'vue';

const open = ref(false);
const title = ref('');
const comment = ref('');
</script>

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer v-model="open" temporary right persistent border fixed-slots :width="360">
        <template #prepend>
          <span class="text-base font-medium text-content-primary">Новая заявка</span>
        </template>

        <div class="flex flex-col gap-2 px-3">
          <CdsTextInput v-model="title" label="Название" />
          <CdsTextArea v-model="comment" label="Комментарий" />
        </div>

        <template #append>
          <div class="flex justify-end gap-2">
            <CdsButton variant="soft" color="brand" @click="open = false">Отмена</CdsButton>
            <CdsButton variant="solid" color="brand" @click="open = false">Сохранить</CdsButton>
          </div>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <CdsButton prepend-icon="add" @click="open = true">Создать заявку</CdsButton>
          <div class="mt-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Клик по затемнению и Esc не закрывают панель с формой — только кнопки внутри, поэтому ввод не теряется.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Свёрнутая панель

Свойство minified сжимает панель до иконок и отдаёт ширину контенту. При наведении мыши панель разворачивается поверх страницы, не сдвигая её, поэтому подписи разделов остаются доступны.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDrawer,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsToggle
} from '@central-design-system/components';
import { ref } from 'vue';

const minified = ref(true);
</script>

<template>
  <div class="flex flex-col gap-4">
    <CdsToggle v-model="minified" label="Свернуть до иконок" hide-details />

    <div class="h-[480px]">
      <CdsLayout container>
        <CdsDrawer permanent border :minified="minified">
          <CdsList>
            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
            <CdsListItem title="Договоры" href="#" prepend-icon="file" />
            <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
          </CdsList>
        </CdsDrawer>

        <CdsMain>
          <CdsPage padding>
            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Наведите курсор на свёрнутую панель — она развернётся поверх контента, не сдвигая его.
            </div>
          </CdsPage>
        </CdsMain>
      </CdsLayout>
    </div>
  </div>
</template>

Положение

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

Sandbox Storybook

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

<template>
  <div class="h-[480px]">
    <CdsLayout container>
      <CdsDrawer permanent border>
        <CdsList>
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
        </CdsList>
      </CdsDrawer>

      <CdsDrawer permanent right border>
        <CdsList>
          <CdsListItem title="История изменений" href="#" prepend-icon="time" />
          <CdsListItem title="Комментарии" href="#" prepend-icon="message" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Слева навигация, справа контекст записи — макет резервирует место под обе панели.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Цвет

Свойство bg-color красит фон панели алиасом палитры, color — текст и иконки внутри. Тёмная панель рядом со светлым контентом подчёркивает границу рабочей области.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsDrawer,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsRadio,
  CdsRadioGroup
} from '@central-design-system/components';
import { ref } from 'vue';

const bgColor = ref('default');
</script>

<template>
  <div class="flex flex-col gap-4">
    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
      <CdsRadio value="default" label="Цвет темы" />
      <CdsRadio value="neutral" label="neutral" />
      <CdsRadio value="indigo" label="indigo" />
      <CdsRadio value="teal" label="teal" />
    </CdsRadioGroup>

    <div class="h-[480px]">
      <CdsLayout container>
        <CdsDrawer permanent :bg-color="bgColor === 'default' ? undefined : bgColor">
          <CdsList>
            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
            <CdsListItem title="Договоры" href="#" prepend-icon="file" />
            <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
          </CdsList>
        </CdsDrawer>

        <CdsMain>
          <CdsPage padding>
            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
          </CdsPage>
        </CdsMain>
      </CdsLayout>
    </div>
  </div>
</template>

Фоновое изображение

Свойство image кладёт картинку по ссылке под содержимое панели, слот image — свою разметку фона. Текст поверх фона красьте свойством color, чтобы он оставался читаемым.

Sandbox Storybook

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

<template>
  <div class="h-[580px]">
    <CdsLayout container>
      <CdsDrawer permanent image="/images/temp/space.webp" color="content-on-dark">
        <CdsList bg-color="transparent">
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
          <CdsListItem title="Договоры" href="#" prepend-icon="file" />
          <CdsListItem title="Отчёты" href="#" prepend-icon="view-rows" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Свойство <code>image</code> кладёт картинку под содержимое панели. Для своей разметки фона — градиента или
            видео — есть слот <code>image</code>.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Слоты

Слот	Описание
prepend	Закреплённая зона сверху: логотип, профиль
default	Элементы навигации
append	Закреплённая зона снизу: выход, служебные ссылки
image	Фон под содержимым панели

Свойство fixed-slots оставляет prepend и append на месте и отдаёт скролл только списку разделов — длинная навигация не уводит кнопку выхода за край.

Sandbox Storybook

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

<template>
  <div class="h-[380px]">
    <CdsLayout container>
      <CdsDrawer permanent border fixed-slots>
        <template #prepend>
          <div class="flex items-center gap-2">
            <CdsAvatar icon="company" />
            <span class="font-bold text-content-primary">Портал закупок</span>
          </div>
        </template>

        <CdsList>
          <CdsListItem v-for="n in 12" :key="n" :title="'Раздел ' + n" href="#" prepend-icon="file" />
        </CdsList>

        <template #append>
          <CdsButton variant="soft" color="neutral" block prepend-icon="logout">Выйти</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Список разделов скроллится, а шапка и кнопка выхода остаются на месте.
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

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

Storybook

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

Навигация приложения

Логотип в prepend, разделы в CdsList с active у текущего, кнопка выхода в append. Схема макета lhh lpr fff отдаёт панели верхний левый угол, поэтому она начинается от самого верха и читается как основа приложения.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsAvatar,
  CdsButton,
  CdsDrawer,
  CdsHeader,
  CdsLayout,
  CdsList,
  CdsListGroup,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
import { ref } from 'vue';

const sections = [
  { key: 'purchases', title: 'Закупки', icon: 'shopping-cart' },
  { key: 'contracts', title: 'Договоры', icon: 'file' },
  { key: 'reports', title: 'Отчёты', icon: 'view-rows' }
];
const active = ref('purchases');
</script>

<template>
  <div class="h-[560px]">
    <CdsLayout container view="lhh lpr fff">
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>{{ sections.find((section) => section.key === active)?.title }}</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer permanent border fixed-slots>
        <template #prepend>
          <div class="flex items-center gap-2">
            <CdsAvatar icon="company" />
            <span class="font-bold text-content-primary">Портал закупок</span>
          </div>
        </template>

        <CdsList>
          <CdsListItem
            v-for="section in sections"
            :key="section.key"
            :title="section.title"
            :prepend-icon="section.icon"
            :active="active === section.key"
            @click="active = section.key"
          />
          <CdsListGroup>
            <template #activator="{ props }">
              <CdsListItem title="Контрагенты" prepend-icon="company" v-bind="props" />
            </template>
            <CdsListItem title="Поставщики" href="#" prepend-icon="user-group" />
            <CdsListItem title="Заказчики" href="#" prepend-icon="user" />
          </CdsListGroup>
        </CdsList>

        <template #append>
          <CdsButton variant="soft" color="neutral" block prepend-icon="logout">Выйти</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
            Раздел «{{ sections.find((section) => section.key === active)?.title }}»
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

Панель уведомлений

Правая панель с temporary открывается по иконке в шапке, показывает список и закрывается кликом по затемнению. Места в макете она не занимает, поэтому основной контент не перестраивается при открытии.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsBadge,
  CdsButton,
  CdsDrawer,
  CdsFunctionalButton,
  CdsHeader,
  CdsLayout,
  CdsList,
  CdsListItem,
  CdsMain,
  CdsPage,
  CdsToolbar,
  CdsToolbarTitle
} from '@central-design-system/components';
import { ref } from 'vue';

const open = ref(false);
const items = ref([
  { id: 1, title: 'Закупка №2401 опубликована', time: '5 минут назад' },
  { id: 2, title: 'Новое предложение от ООО «Вектор»', time: '2 часа назад' },
  { id: 3, title: 'Договор №118 подписан', time: 'вчера' }
]);
</script>

<template>
  <div class="h-[520px]">
    <CdsLayout container>
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
          <CdsBadge :content="items.length" :model-value="items.length > 0">
            <CdsFunctionalButton icon="notification" aria-label="Уведомления" @click="open = true" />
          </CdsBadge>
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer v-model="open" right temporary border fixed-slots>
        <template #prepend>
          <div class="font-bold text-content-primary">Уведомления</div>
        </template>

        <CdsList>
          <CdsListItem v-for="item in items" :key="item.id" :title="item.title" :subtitle="item.time" href="#" />
        </CdsList>

        <template #append>
          <CdsButton variant="soft" color="neutral" block @click="items = []">Отметить все прочитанными</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
bgColor	string | undefined	—	Цвет фона компонента
border	boolean | undefined	false	Добавляет границы между секциями (prepend/append).
captureFocus	boolean | undefined	true	Возвращает фокус внутрь контента, если он ушёл за его пределы — например, по Tab с конца страницы. Клик мышью фокус не перехватывает.
color	string | undefined	—	Цвет компонента
disableResizeWatcher	boolean | undefined	false	Не синхронизировать v-model с шириной экрана. По умолчанию обычная панель закрывается, когда экран сужается и она становится выезжающей, и открывается обратно на широком.
fixed	boolean | undefined	false	Применяет position: fixed.
fixedSlots	boolean | undefined	false	Использовать внутренний скролл для секции контента.
height	string | number | undefined	—	Высота компонента
image	string | undefined	—	Фоновое изображение панели (URL). Для своей разметки фона есть слот image.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minified	boolean | undefined	false	Свёрнутый вид (только иконки) до наведения мыши.
minWidth	string | number | undefined	—	Минимальная ширина компонента
modelValue	boolean | null | undefined	null	Показать/скрыть панель (v-model). Без него обычная панель открыта на широком экране, а выезжающая закрыта.
permanent	boolean | undefined	false	Постоянно видима, независимо от размера экрана.
persistent	boolean | undefined	false	Клик по затемнению и клавиша Esc не закрывают панель — только v-model. Для панелей с формой, где случайное закрытие теряет ввод.
retainFocus	boolean | undefined	true	Замыкает Tab-навигацию внутри контента: с последнего фокусируемого элемента фокус переходит на первый и наоборот.
right	boolean | undefined	false	Позиционирование справа.
scrim	string | boolean | undefined	true	Затемнение под панелью, когда она накрывает контент. false убирает его целиком — контент остаётся кликабельным, а панель закрывается только клавишей Esc или через v-model; строка задаёт цвет.
tag	string | JSXComponent<any> | undefined	'aside'	Пользовательский HTML-тег для отображения
temporary	boolean | undefined	false	Временная панель: выезжает поверх контента на любой ширине экрана, открывается через v-model и закрывается по оверлею. На узком экране так ведёт себя любая непостоянная панель.
theme	string | undefined	—	Тема компонента
touchless	boolean | undefined	false	Отключает жесты: выезжающая панель не открывается свайпом от края экрана и не закрывается свайпом.
width	string | number | undefined	240	Ширина панели, px. Уходит и в макет: контент сдвигается ровно на неё.

События

Имя	Тип	Описание
closed	[value: boolean]	Панель закрылась.
opened	[value: boolean]	Панель открылась.
update:modelValue	[value: boolean]	Изменение v-model.

Слоты

Имя	Тип	Описание
append	any	Контент после навигации.
default	any	Элементы навигации (CdsList).
image	{ image: string | undefined; }	Свой фон панели вместо CdsImage из пропа image; растягивается под контентом.
prepend	any	Контент перед навигацией.

Exposed

Имя	Тип	Описание
drawerRef	HTMLElement | undefined	Ссылка на корневой DOM-элемент панели.