布局 | astryx-vue

Content

使用方法

Layout 最多排五个区域：页眉、起始边、正文、结束边、页脚。默认插槽是正文，其余是具名插槽。页面外框交给 AppShell；Layout 用在页面内部、卡片或对话框里。内容只是一行或一列时用 HStack 或 VStack。

vue

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

<template>
  <Layout>
    <template #header>
      <LayoutHeader has-divider>
        订单
      </LayoutHeader>
    </template>
    <LayoutContent>
      选择一笔订单。
    </LayoutContent>
  </Layout>
</template>

height 取 fill 或 auto。fill 撑满容器，正文在中间滚动；auto 随内容长高。contentWidth 限制正文宽度并居中，分隔线仍然拉满。百分比、fit-content、max-content、min-content 或裸 var() 走约束宽度。padding 只作用于这一层，不会传给嵌套的 Layout。页眉或页脚没有写 hasDivider 时，用 defaultHasDividers。

LayoutHeader、LayoutFooter、LayoutContent、LayoutPanel 是四个区域组件。面板的 width 传数字时按像素。宽度由 ResizeHandle 控制时，把 useResizable 返回的 props 传给 resizable。

解剖

部分	说明
布局容器	摆放页眉、起始侧、内容、末尾侧和页脚这些插槽的通用布局。
页眉	使用方提供的可选 LayoutHeader，一般放在 header 插槽。
面板	使用方放在起始侧或末尾侧插槽里的可选 LayoutPanel。
内容区	使用方放在 content 插槽里的可选 LayoutContent。
页脚	使用方提供的可选 LayoutFooter，一般放在 footer 插槽。

最佳实践

指引	实践
推荐	页眉、侧栏或页脚需要固定，正文单独滚动时用 Layout。
推荐	滚动放在 `LayoutContent` 上，页眉和页脚留在外面。
避免	用 Layout 当应用外框。顶部和侧边导航用 AppShell。
避免	面板分隔线和拖拽分隔条的线画在同一条边上。

示例

基础卡片

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.

卡片包含页眉、可滚动的正文，以及放着操作按钮的页脚。

仅正文

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.

卡片里只有正文，没有页眉和页脚。

内容宽度

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 把文字约束并居中，分隔线仍然拉满。

双侧面板

Folders

Documents
Projects
Downloads

Files

Select a folder to view its contents

Details Select a file to view details

文件浏览器：左侧是文件夹，中间是文件，右侧是详情。

通栏正文

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.

正文没有内边距，一直铺到边缘，适合表格或图片。

侧栏导航

General Settings

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

设置页有导航侧栏、正文、页眉和页脚。

使用方法 ​

解剖

最佳实践 ​

示例 ​