Put the content into CdsPage — it calculates the minimum height of the page. CdsMain works only inside CdsLayout: outside the layout it renders nothing and warns about it in the console.

Scenarios

The main area of the application

CdsMain renders as a main tag — one semantic content area per page. The paddings are recalculated on the fly: minify a drawer, hide the header — and the content immediately takes the freed space.

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

Slots

Name	Type	Description
default	any	Main content of the application (CdsPage).