Части макета описаны на отдельных страницах: CdsHeader, CdsDrawer, CdsMain, CdsPage, CdsFooter и CdsToolbar. Собрать каркас мышью и скопировать готовый код можно в конструкторе макета.

Анатомия

CdsLayout — корневой элемент приложения. Внутрь кладутся части макета: шапка, панели, CdsMain с CdsPage и подвал. Порядок в шаблоне роли не играет — позиции считает сам макет.

Storybook

Вариации

Схема view

Свойство view описывает макет тремя строками: верх, середина, низ. Буквы — части макета: h — шапка, f — подвал, l и r — левая и правая панели, p — страница. Угловые буквы верхней и нижней строки решают спор за углы: hhh отдаёт всю ширину шапке, lhh — верхний левый угол панели.

Sandbox Storybook

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

const view = ref('hhh lpr fff');
</script>

<template>
  <div class="flex flex-col gap-4">
    <CdsRadioGroup v-model="view" direction="horizontal" hide-details>
      <CdsRadio value="hhh lpr fff" label="hhh lpr fff" />
      <CdsRadio value="lhh lpr lff" label="lhh lpr lff" />
      <CdsRadio value="lhh lpr fff" label="lhh lpr fff" />
    </CdsRadioGroup>

    <div class="h-[520px]">
      <CdsLayout container :view="view">
        <CdsHeader bordered>
          <CdsToolbar>
            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
          </CdsToolbar>
        </CdsHeader>

        <CdsDrawer permanent border>
          <CdsList>
            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
            <CdsListItem title="Договоры" href="#" prepend-icon="file" />
            <CdsListItem title="Контрагенты" href="#" prepend-icon="company" />
          </CdsList>
        </CdsDrawer>

        <CdsMain>
          <CdsPage padding>
            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Схема <code>{{ view }}</code>
            </div>
          </CdsPage>
        </CdsMain>

        <CdsFooter bordered :height="40">
          <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
        </CdsFooter>
      </CdsLayout>
    </div>
  </div>
</template>

Заглавная буква добавляет части position: fixed: HHH lpr fff прибивает шапку к окну, hhh LPR fff — обе панели. Значение по умолчанию — hhh lpr fff.

Контейнерный режим

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

Sandbox Storybook

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

<template>
  <div class="h-[520px] overflow-hidden rounded-200 border border-line-primary">
    <CdsLayout container>
      <CdsHeader elevated>
        <CdsToolbar>
          <CdsToolbarTitle>Шапка остаётся на месте</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding>
          <div class="flex flex-col gap-2">
            <div v-for="n in 12" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Блок {{ n }} — прокрутите область, страница за ней не двигается
            </div>
          </div>
        </CdsPage>
      </CdsMain>

      <CdsFooter elevated :height="40">
        <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

События

Макет следит за своей областью прокрутки и делится этим: @scroll отдаёт позицию, направление и точку перегиба, @resize — новые размеры, @scroll-height — высоту содержимого. На этих событиях построены плавающие шапка и подвал, но их можно использовать и для своей логики — например, подгружать следующую страницу списка.

Sandbox Storybook

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

const top = ref(0);
const direction = ref<'up' | 'down' | 'left' | 'right'>('down');
const size = ref({ width: 0, height: 0 });
</script>

<template>
  <div class="h-[520px]">
    <CdsLayout
      container
      @scroll="
        top = $event.position.top;
        direction = $event.direction;
      "
      @resize="size = $event"
    >
      <CdsMain>
        <CdsPage padding>
          <div class="mb-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
            Прокручено: {{ Math.round(top) }} px · направление: {{ direction === 'down' ? 'вниз' : 'вверх' }} · ширина
            содержимого: {{ Math.round(size.width) }} px
          </div>
          <div class="flex flex-col gap-2">
            <div v-for="n in 15" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-secondary">
              Блок {{ n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

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

Storybook

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

Каркас приложения

Типичный набор: шапка с CdsToolbar, постоянная навигация в CdsDrawer, CdsMain → CdsPage с контентом и подвал. Кнопка в шапке переключает minified — панель сжимается до иконок и отдаёт ширину контенту, а при наведении разворачивается обратно.

Sandbox Storybook

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

const minified = ref(false);
const stats = [
  { title: 'Активные закупки', value: '128', hint: '+12 за неделю' },
  { title: 'Заявки на рассмотрении', value: '34', hint: '8 требуют действия' },
  { title: 'Поставщики', value: '512', hint: '+5 новых' },
  { title: 'Сообщения', value: '17', hint: '3 непрочитанных' }
];
</script>

<template>
  <div class="h-[640px]">
    <CdsLayout container>
      <CdsHeader bordered elevated :height="64">
        <CdsToolbar>
          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Свернуть навигацию" @click="minified = !minified" />
          <CdsAvatar icon="company" class="mr-2" />
          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>

          <CdsFunctionalButton icon="search" aria-label="Поиск" />
          <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
          <CdsAvatar icon="user" class="ml-2" />
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer permanent border :minified="minified">
        <CdsList>
          <CdsListItem title="Дашборд" href="#" prepend-icon="tree" active />
          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
          <CdsListItem title="Заявки" href="#" prepend-icon="file" />
          <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>
          <CdsListItem title="Аналитика" href="#" prepend-icon="view-rows" />
          <CdsListItem title="Настройки" href="#" prepend-icon="settings" />
        </CdsList>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <CdsToolbar class="mb-4 gap-4 rounded-200">
            <CdsToolbarTitle class="text-xl font-bold">Дашборд</CdsToolbarTitle>
            <CdsButton variant="soft" color="neutral" prepend-icon="adjust">Фильтры</CdsButton>
            <CdsButton prepend-icon="add">Создать закупку</CdsButton>
          </CdsToolbar>

          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <CdsCard v-for="stat in stats" :key="stat.title" class="p-4">
              <CdsCardSubtitle>{{ stat.title }}</CdsCardSubtitle>
              <CdsCardTitle class="text-2xl font-bold">{{ stat.value }}</CdsCardTitle>
              <CdsCardText class="text-content-secondary">{{ stat.hint }}</CdsCardText>
            </CdsCard>
          </div>

          <CdsCard class="mt-4 p-4">
            <CdsCardTitle>Последние закупки</CdsCardTitle>
            <CdsCardText>
              Прокрутите страницу, чтобы увидеть, как шапка и подвал остаются на месте, а содержимое страницы скроллится
              внутри макета.
            </CdsCardText>
            <CdsList>
              <CdsListItem
                v-for="n in 12"
                :key="n"
                :title="'Закупка №' + (1000 + n)"
                :subtitle="'Поставщик ООО «Компания ' + n + '»'"
                href="#"
                prepend-icon="shopping-cart"
                append-icon="chevron-right"
              />
            </CdsList>
            <CdsCardActions class="justify-end">
              <CdsButton variant="soft" color="neutral">Показать все</CdsButton>
            </CdsCardActions>
          </CdsCard>
        </CdsPage>
      </CdsMain>

      <CdsFooter bordered :height="48">
        <div class="flex h-[48px] items-center justify-between px-4">
          <span class="text-content-secondary">© 2026 Портал закупок</span>
          <span class="flex items-center gap-4">
            <CdsLink href="#">Помощь</CdsLink>
            <CdsLink href="#">Конфиденциальность</CdsLink>
          </span>
        </div>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

Шапка, скрывающаяся при скролле

На длинных списках место дороже навигации. Свойство reveal у шапки и подвала прячет их при прокрутке вниз и возвращает при прокрутке вверх; reveal-offset задаёт зону у начала списка, где шапка остаётся на месте.

Sandbox Storybook

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

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

<template>
  <div class="h-[500px]">
    <CdsLayout container>
      <CdsHeader reveal elevated :reveal-offset="80" @reveal="revealed = $event">
        <CdsToolbar>
          <CdsToolbarTitle>Каталог поставщиков</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding>
          <div class="mb-2 text-content-secondary">
            Шапка {{ revealed ? 'видна' : 'скрыта' }} — прокрутите вниз, чтобы освободить место списку, и вверх, чтобы
            вернуть её.
          </div>
          <div class="flex flex-col gap-2">
            <div v-for="n in 20" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Поставщик №{{ n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>

      <CdsFooter reveal elevated :height="40">
        <div class="flex h-[40px] items-center px-4 text-content-secondary">Найдено 20 поставщиков</div>
      </CdsFooter>
    </CdsLayout>
  </div>
</template>

Рабочая область с фильтрами

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

Sandbox Storybook

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

const filters = ref(false);
const statuses = ref<string[]>(['active']);
</script>

<template>
  <div class="h-[520px]">
    <CdsLayout container view="lhh lpr fff">
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
          <CdsButton variant="soft" color="neutral" prepend-icon="adjust" @click="filters = !filters"
            >Фильтры</CdsButton
          >
        </CdsToolbar>
      </CdsHeader>

      <CdsDrawer permanent border>
        <CdsList>
          <CdsListItem title="Все закупки" href="#" prepend-icon="shopping-cart" active />
          <CdsListItem title="Избранное" href="#" prepend-icon="star" />
          <CdsListItem title="Архив" href="#" prepend-icon="archive" />
        </CdsList>
      </CdsDrawer>

      <CdsDrawer v-model="filters" right temporary border>
        <template #prepend>
          <div class="font-bold text-content-primary">Фильтры</div>
        </template>

        <div class="flex flex-col gap-1">
          <CdsCheckbox v-model="statuses" value="active" label="Активные" hide-details />
          <CdsCheckbox v-model="statuses" value="draft" label="Черновики" hide-details />
          <CdsCheckbox v-model="statuses" value="done" label="Завершённые" hide-details />
        </div>

        <template #append>
          <CdsButton block @click="filters = false">Применить</CdsButton>
        </template>
      </CdsDrawer>

      <CdsMain>
        <CdsPage padding>
          <div class="flex flex-col gap-2">
            <div v-for="n in 8" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
              Закупка №{{ 2400 + n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
container	boolean | undefined	false	Контейнерный режим: макет скроллится внутри себя, а не страницы.
theme	string | undefined	—	Тема компонента
view	string | undefined	'hhh lpr fff'	Схема макета из трёх строк: верх (header), середина (left-page-right), низ (footer). Например 'hhh lpr fff'.

События

Имя	Тип	Описание
resize	[contentRect: Pick<DOMRectReadOnly, "width" | "height">]	Изменение размеров области макета.
scroll	[info: ScrollObserver]	Скролл области макета.
scrollHeight	[height: number]	Изменение высоты прокручиваемого содержимого.

Слоты

Имя	Тип	Описание
default	any	Содержимое макета: CdsHeader, CdsDrawer, CdsMain, CdsFooter.

Exposed

Имя	Тип	Описание
animate	() => void	Включает анимацию перестроения макета на время ближайшего обновления размеров.
containerHeight	number	Высота области контента без шапки и подвала, в пикселях.
footer	LayoutPart	Размеры и смещение подвала макета.
header	LayoutPart	Размеры и смещение шапки макета.
height	number	Полная высота макета в пикселях.
instances	Record<string, unknown>	Зарегистрированные в макете компоненты по идентификаторам — шапка, подвал, панели, контент.
isContainer	boolean	Ограничен ли макет по ширине контейнером (container) вместо растягивания на весь экран.
left	LayoutPart	Размеры и смещение левой панели макета.
right	LayoutPart	Размеры и смещение правой панели макета.
rootRef	HTMLElement | undefined	Ссылка на корневой DOM-элемент макета.
rows	{ top: string[]; middle: string[]; bottom: string[]; }	Идентификаторы компонентов, распределённые по рядам макета: сверху, посередине и снизу.
scroll	ScrollObserver	Состояние прокрутки макета: позиция, направление и дельта.
scrollbarWidth	number	Ширина системной полосы прокрутки в пикселях — учитывается при блокировке скролла.
totalWidth	number	Полная ширина макета в пикселях.
update	(part: "left" | "right" | "footer" | "header", prop: keyof LayoutPart, value: number | boolean) => void	Обновляет размер, смещение или резервирование места для части макета.