Maofeng
53 lines
1.2 KiB
Plaintext
53 lines
1.2 KiB
Plaintext
---
|
|
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`。内容列始终使用剩余空间，并允许收缩到零宽。
|