---
title: 设置应用布局
description: 配置样式源并组合应用布局区域。
order: 10
toc:
  - id: styles
    title: 导入样式源
  - id: compose
    title: 组合区域
  - id: sizes
    title: 调整尺寸
---

## 导入样式源 {#styles}

在应用全局样式中导入 Layout 的 Tailwind 源：

```css
@import "@workspace/layout/globals.css";
```

## 组合区域 {#compose}

`AppLayout` 接受 React 节点或无必需属性的组件定义。需要业务属性时传入节点；需要组件从布局上下文读取状态时，可以直接传入组件定义。

```tsx
<AppLayout
  header={AppHeader}
  rail={ActivityRail}
  sidebar={<NavigationSidebar groups={groups} />}
  aside={AssistantPanel}
  footer={StatusBar}
>
  <RouterOutlet />
</AppLayout>
```

组件定义会在 `AppLayout` 的 Provider 内创建，因此 `AppHeader` 和 `AssistantPanel` 可以调用 `useLayoutConfig`。

## 调整尺寸 {#sizes}

通过 CSS 自定义属性调整辅助列宽度：

```css
.application-layout {
  --layout-rail-width: 4rem;
  --layout-sidebar-width: 18rem;
  --layout-aside-width: 22rem;
}
```

把该类名传给 `AppLayout`。内容列始终使用剩余空间，并允许收缩到零宽。