WtLayout

Структурний контейнер сторінки всередині Body wt-page. Визначає доступну область для контенту, містить один або декілька wt-content-wrapper.

• Width — заповнює доступний простір; Min Width = 320px.
• Default Width — початкова ширина (defaultWidth); без неї Layout «гумовий».
• Height — заповнює контейнер.
• Resizing — користувач змінює ширину перетягуванням межі (або стрілками з фокусом на межі). Сусідній Layout з боку resizeEdge компенсує зміну: Layout A + Layout B = Available Width.
• Visibility — Layout може бути прихований лише сусіднім Layout (тобто його власником через v-if / v-show); сам себе не приховує. Простір автоматично перерозподіляється між видимими Layout.

Props

Prop	Type	Default	Description
defaultWidth	number	undefined	Початкова ширина в px. Без неї — fluid
resizable	boolean	false	Дозволяє змінювати ширину перетягуванням межі
resizeEdge	'start' | 'end'	'end'	Межа з ручкою; сусід з цього боку компенсує

Events

Event	Payload	Description
resize	width: number	Після завершення зміни ширини, в px

CSS variables

Variable	Light	Dark
--wt-layout-background-color	--p-surface-0	--p-surface-800
--wt-layout-border-radius	--p-border-radius-lg	--p-border-radius-lg
--wt-layout-padding	0	0
--wt-layout-gap	0	0
--wt-layout-min-width	320px	320px

Example Layout

Resizable: 320px

Fluid

Code

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

const width = ref(320);
</script>

<template>
  <div style="display: flex; gap: 16px; height: 240px; padding: 16px; background: var(--wt-page-background-color)">
    <wt-layout :default-width="320" resizable @resize="width = $event">
      <wt-content-wrapper>Resizable: {{ width }}px</wt-content-wrapper>
    </wt-layout>
    <wt-layout>
      <wt-content-wrapper>Fluid</wt-content-wrapper>
    </wt-layout>
  </div>
</template>