页面布局 · Layout

使用头部、内容、侧面板和页脚插槽构建页面。

安装与前置条件

npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0

需要 React 19+，按顺序导入基础 CSS 和主题，并设置 Theme Provider。参见开始使用。

示例与使用方式

• 页面布局 · 综合展示 1：首先体验这个示例，再查看代码理解组件的组合方式。
• 页面布局 · 综合展示 2：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 综合展示 3：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 综合展示 4：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 综合展示 5：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 基础用法 6：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 基础用法 7：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 8：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 9：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 10：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 11：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 12：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 13：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 14：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。
• 页面布局 · 交互示例 15：可交互查看这一用法的行为，复制代码时保留它实际使用的属性与导入。

API 与上游详细参考

优先使用 0.7.1 官方中文说明；上游尚未提供中文的条目保留英文。属性名、类型及默认值保持原生 API，不把示例状态名称当成组件属性。

Layout

Layout is a general five-slot primitive for arranging header, start, content, end, and footer regions within a page or bounded container. AppShell owns the page shell and app-wide navigation behavior; use HStack or VStack for simple directional stacking.

使用建议

• Use Layout when content needs named header, start, content, end, or footer regions.
• Use HStack and VStack for simple directional stacking within a content area.
• 避免：Use Layout for simple stacking layouts; use HStack or VStack instead.
• 避免：Use Layout as the page shell or for app-wide navigation; use AppShell for that responsibility.

Page with a details panel inside AppShell

function OrdersPage() {
  return (
    <AppShell
      sideNav={
        <SideNav>
          <SideNavItem label="Orders" isSelected />
          <SideNavItem label="Customers" />
          <SideNavItem label="Settings" />
        </SideNav>
      }>
      {/* No padding props needed: the page Layout's regions keep their
          default inset inside AppShell's full-bleed content area. */}
      <Layout
        header={
          <LayoutHeader hasDivider>
            <Heading level={1}>Orders</Heading>
          </LayoutHeader>
        }
        end={
          <LayoutPanel
            hasDivider
            width={320}
            role="complementary"
            label="Order details">
            <VStack gap={2}>
              <Heading level={2}>Order #1042</Heading>
              <Text type="body" color="secondary">
                Shipped · 3 items · $184.00
              </Text>
            </VStack>
          </LayoutPanel>
        }
        content={
          <LayoutContent>
            <Text type="body">
              Select an order to see its shipping and payment details.
            </Text>
          </LayoutContent>
        }
      />
    </AppShell>
  );
}

主题 API

{
  "targets": [
    {
      "className": "astryx-layout",
      "visualProps": [
        "height"
      ]
    },
    {
      "className": "astryx-layout-content"
    },
    {
      "className": "astryx-layout-footer"
    },
    {
      "className": "astryx-layout-header"
    },
    {
      "className": "astryx-layout-panel"
    }
  ]
}

LayoutHeader

LayoutContent

LayoutFooter

LayoutPanel

Card

Section

组件结构

• 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.

Layout Content

可滚动的主内容区域。

Layout Footer

用于操作栏、分页和状态栏的底部栏。

Layout Header

用于页面标题、应用栏和工具栏的顶部栏。

Layout Panel

用于导航、设置或检查器面板的侧边栏。