Содержимое кладите в CdsPage — он считает минимальную высоту страницы. CdsMain работает только внутри CdsLayout: вне макета он ничего не отрисует и предупредит об этом в консоли.

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

Основная область приложения

CdsMain рендерится тегом main — одна семантическая область контента на страницу. Отступы пересчитываются на лету: свернули панель, скрыли шапку — контент сразу занимает освободившееся место.

Sandbox Storybook

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

<template>
  <div class="h-[320px]">
    <CdsLayout container>
      <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" />
        </CdsList>
      </CdsDrawer>

      <CdsMain class="bg-surface-secondary">
        <CdsPage padding>
          <div class="rounded-200 bg-surface-primary p-4 text-content-primary">
            Подсвеченная область — CdsMain. Её отступы сверху, снизу и слева равны размерам шапки, подвала и панели.
          </div>
        </CdsPage>
      </CdsMain>

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

API

Слоты

Имя	Тип	Описание
default	any	Основное содержимое приложения (CdsPage).