WtPage

Верхній структурний рівень інтерфейсу: визначає компоновку сторінки та об'єднує один або декілька wt-layout в єдиний робочий простір.

Page
├── Header
└── Body
    └── Layout
        └── Content Wrapper
            └── Content

• Займає 100% ширини та висоти контейнера.
• Body розподіляє доступну ширину між Layout; при зміні розміру вікна простір перерозподіляється, мінімальні обмеження Layout лишаються активними.
• Не містить безпосередньо контентних компонентів, бізнес-логіки чи візуального оформлення — лише Layout.

Props

Prop	Description
navigationRail	{ topItems?, bottomItems?, activeItemId? }: конфіг wt-navigation-rail

Навігаційна панель відображається зліва від body, під header. Вона з'являється, лише якщо хоча б один зі списків topItems / bottomItems не порожній; без пропа або з порожніми списками не рендериться.

Events

Event	Description
navigation-select	Клік по доступній кнопці панелі, payload: item

Slots

Slot	Description
header	Шапка сторінки (напр. wt-app-header)
default	Body: один або декілька wt-layout

CSS variables

Variable	Light	Dark
--wt-page-background-color	--p-surface-50	--p-surface-850
--wt-page-padding-x / -y	0	0
--wt-page-gap	0	0
--wt-page-body-background-color	transparent	transparent
--wt-page-body-padding-x / -y	--spacing-sm	--spacing-sm
--wt-page-body-gap	--spacing-sm	--spacing-sm

Example Page

Fluid

Fixed 320px

Code

<script setup>
import { ref } from 'vue';

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

<template>
  <div style="height: 480px">
    <wt-page>
      <template #header>
        <div style="height: 40px; background: lightblue" />
      </template>
      <wt-layout :default-width="320" resizable>
        <wt-content-wrapper align="stretch">
          <wt-button @click="isSidePanelShown = !isSidePanelShown">
            Toggle side layout
          </wt-button>
        </wt-content-wrapper>
      </wt-layout>
      <wt-layout>
        <wt-content-wrapper>Fluid</wt-content-wrapper>
      </wt-layout>
      <wt-layout v-if="isSidePanelShown" :default-width="320">
        <wt-content-wrapper>Fixed 320px</wt-content-wrapper>
      </wt-layout>
    </wt-page>
  </div>
</template>