CdsPage живёт внутри CdsMain — вне его он ничего не отрисует и предупредит об этом в консоли. Отступы вокруг всей области контента считает CdsLayout.

Вариации

Отступы

Свойство padding добавляет странице внутренние отступы — обычная раскладка для контентных экранов. Без него содержимое прижимается к краям: так верстают таблицы и карты, которым нужна вся ширина.

Sandbox Storybook

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

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

<template>
  <div class="flex flex-col gap-4">
    <CdsToggle v-model="padding" label="Внутренние отступы страницы" hide-details />

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

Своя высота

Свойство style-fn заменяет расчёт минимальной высоты своим. Функция получает суммарную высоту шапки и подвала и высоту области макета, а возвращает строку стилей. Так страницу можно зафиксировать по высоте и отдать скролл внутреннему списку или таблице.

Sandbox Storybook

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

// Вместо минимальной высоты фиксируем высоту страницы: внутренний список
// получает свой скролл, а страница не растягивает макет.
const styleFn = (offset: number, height: number) => `height: ${height - offset}px; overflow: hidden;`;
</script>

<template>
  <div class="h-[320px]">
    <CdsLayout container>
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>Реестр закупок</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding :style-fn="styleFn" class="flex flex-col">
          <div class="mb-2 text-content-secondary">Шапка страницы остаётся на месте</div>
          <div class="flex-1 overflow-auto rounded-200 border border-line-primary">
            <div v-for="n in 30" :key="n" class="border-b border-line-primary p-2 text-content-primary">
              Закупка №{{ 2400 + n }}
            </div>
          </div>
        </CdsPage>
      </CdsMain>
    </CdsLayout>
  </div>
</template>

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

Пустое состояние на весь экран

Минимальная высота считается с учётом шапки и подвала, поэтому центрирование работает по реальной высоте страницы — заглушка оказывается ровно посередине, а не под шапкой.

Sandbox Storybook

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

<template>
  <div class="h-[320px]">
    <CdsLayout container>
      <CdsHeader bordered>
        <CdsToolbar>
          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
        </CdsToolbar>
      </CdsHeader>

      <CdsMain>
        <CdsPage padding class="flex items-center justify-center">
          <CdsEmptyState
            icon="shopping-cart"
            title="Закупок пока нет"
            text="Создайте первую закупку, чтобы она появилась здесь"
          />
        </CdsPage>
      </CdsMain>

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

API

Пропсы

Имя	Тип	По умолчанию	Описание
padding	boolean | undefined	false	Добавляет внутренние отступы странице.
styleFn	((offset: number, height: number) => string) | undefined	—	Функция вычисления стилей страницы. Получает суммарный offset (header + footer) и высоту области, возвращает строку стилей.

Слоты

Имя	Тип	Описание
default	any	Содержимое страницы.