Layout

Layout 用于搭建典型产品页面、工具类应用或内容型站点布局。它内置侧边栏展开/折叠状态、移动端抽屉侧栏、侧栏拖拽触发轨道、头部、页签、主内容区和页脚结构。

import {
  Layout,
  LayoutFooter,
  LayoutHeader,
  LayoutMain,
  LayoutRail,
  LayoutRoot,
  LayoutSidebar,
  LayoutTab,
  LayoutTrigger
} from '@skyroc/web-ui';

何时使用

• 页面需要固定的应用外壳，包括侧边栏、头部、内容区和页脚。
• 侧边栏需要支持桌面端折叠、移动端抽屉展开。
• 需要在同一布局中切换 sidebar、floating、inset 三种视觉结构。
• 只需要局部内容排列时，不应使用 Layout，直接使用普通容器或 CSS grid/flex 即可。

基础结构

Layout 是便捷组合组件，内部会创建 LayoutRoot、LayoutSidebar、LayoutMain、LayoutHeader、LayoutTab、LayoutFooter 和 LayoutRail。

<Layout
  defaultOpen
  header={<div className="h-12 px-4">Header</div>}
  sidebar={<div className="p-2">Sidebar</div>}
  tab={<div className="border-b p-4">Tab</div>}
  footer={<div className="border-t p-4">Footer</div>}
>
  <div className="p-4">Content</div>
</Layout>

触发器

在 header 或自定义结构中放置 LayoutTrigger，可以切换侧边栏。桌面端切换 open，移动端切换移动抽屉。

<Layout
  defaultOpen
  header={(
    <div className="flex items-center gap-2 px-4">
      <LayoutTrigger />
      <span>Dashboard</span>
    </div>
  )}
  sidebar={<nav className="p-2">Menu</nav>}
>
  <main className="p-4">Content</main>
</Layout>

变体

通过 variant 控制侧边栏和主内容区的视觉关系。

折叠模式

通过 collapsible 控制桌面端折叠行为。

方向与尺寸

通过 side 控制侧边栏在左侧或右侧；通过 size 调整布局字体和布局间距变量。sidebarWidth 和 collapsedSidebarWidth 以 px 为输入，会按当前 size 比例换算为 CSS rem 变量。

自定义样式

通过 ui 控制各 slot 的 class，包括 root、sidebarRoot、sidebarWrapper、sidebar、sidebarGapHandler、mobileRoot、mobile、rail、trigger、main、header、tab 和 footer。

API

Layout

便捷组合组件，适合大多数页面级布局。

结构组件

需要更细粒度控制时，可以直接组合结构组件。LayoutSidebar、LayoutRail、LayoutTrigger 必须在 LayoutRoot 内使用，因为它们依赖布局上下文。

类型