Layout | astryx-vue

Content

Usage

Layout arranges up to five regions: header, start, content, end, and footer. The default slot is the content. The other regions are named slots. AppShell owns the page frame; use Layout inside a page, a card, or a dialog. Use HStack or VStack when the content is only a row or a column.

vue

<script setup lang="ts">
import { Layout, LayoutContent, LayoutHeader } from '@astryx-vue/core/Layout'
</script>

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        Orders
      </LayoutHeader>
    </template>
    <LayoutContent>
      Select an order.
    </LayoutContent>
  </Layout>
</template>

height is fill or auto. fill stretches to the container and scrolls the content; auto grows with the content. contentWidth limits the width of the content and centers it. Dividers stay full width. A percentage, fit-content, max-content, min-content, or a bare var() uses the constrained width mode. padding sets this layout's own outer inset and does not pass to a nested layout. defaultHasDividers is the fallback for a header or footer that does not set hasDivider.

LayoutHeader, LayoutFooter, LayoutContent, and LayoutPanel are the region components. A panel's width is pixels when it is a number. Pass resizable from useResizable when a ResizeHandle controls that width.

Anatomy

Element	Description
Layout container	General layout primitive that places the header, start, content, end, and footer slots.
Header	Optional LayoutHeader region supplied by the caller, typically in the header slot.
Panel	Optional LayoutPanel region supplied by the caller in the start or end slot.
Content area	Optional LayoutContent region supplied by the caller in the content slot.
Footer	Optional LayoutFooter region supplied by the caller, typically in the footer slot.

Best practices

Guidance	Practices
Do	Use Layout when the page or card has a header, a side panel, or a footer that should stay put while the content scrolls.
Do	Put the scroll on `LayoutContent`. Leave the header and footer outside it.
Don't	Use Layout as the application frame. Use AppShell for top and side navigation.
Don't	Draw a panel divider and a resize-handle divider on the same edge.

Examples

Basic card

This is a basic card layout with a header, scrollable content area, and footer. The layout automatically handles padding and spacing between sections. When content exceeds the available height, the content area scrolls independently while the header and footer stay fixed in place. This pattern works well for modal dialogs, detail panels, and any card where the amount of content is unpredictable. The dividers between header, content, and footer provide clear visual boundaries between the fixed and scrollable regions.

A card with a header, a scrolling content area, and a footer of actions.

Content only

Simple Content

A layout can have just content without header or footer. This is useful for simple cards or content blocks that don't need structured sections.

A card that is only a content area, with no header or footer.

Content width

The contentWidth prop constrains content to a maximum width and centers it within the layout. Dividers remain full-bleed while content stays narrow and readable. Common widths: 640 for forms, 960 for content pages.

contentWidth constrains and centers the text while the dividers stay full bleed.

Dual panel

Folders

Documents
Projects
Downloads

Files

Select a folder to view its contents

Details Select a file to view details

A file browser: folders at the start, files in the middle, details at the end.

Full bleed content

Section automatically escapes the parent container padding to fill edge-to-edge. Useful for wash backgrounds, tables, or images that need to span the full width.

Content runs edge to edge with no padding, for a table or an image.

Sidebar navigation

General Settings

Configure your general preferences here. The sidebar navigation allows you to switch between different settings sections.

A settings page with a navigation panel, a content area, a header, and a footer.

Usage ​