CdsPage lives inside CdsMain — outside it renders nothing and warns about it in the console. The paddings around the whole content area are calculated by CdsLayout.

Variations

Paddings

The padding prop adds inner paddings to the page — the usual layout for content screens. Without it the content sticks to the edges: that is how tables and maps that need the full width are laid out.

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>

Custom height

The style-fn prop replaces the minimum height calculation with your own. The function receives the total height of the header and the footer and the height of the layout area, and returns a style string. This is how a page can be fixed in height and give the scrolling to an inner list or table.

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>

Scenarios

A full-screen empty state

The minimum height accounts for the header and the footer, so the centering works against the real height of the page — the placeholder ends up exactly in the middle instead of right under the header.

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

Props

Name	Type	Default	Description
padding	boolean | undefined	false	Adds paddings to the page.
styleFn	((offset: number, height: number) => string) | undefined	—	Function that computes the styles of the page. It receives the total offset (header + footer) and the height of the area, and returns a style string.

Slots

Name	Type	Description
default	any	Content of the page.