Maofeng
53 lines
1.3 KiB
Plaintext
53 lines
1.3 KiB
Plaintext
---
|
|
title: Set up the application layout
|
|
description: Configure the style source and compose application layout regions.
|
|
order: 10
|
|
toc:
|
|
- id: styles
|
|
title: Import the style source
|
|
- id: compose
|
|
title: Compose regions
|
|
- id: sizes
|
|
title: Adjust sizes
|
|
---
|
|
|
|
## Import the style source {#styles}
|
|
|
|
Import the Layout Tailwind source from the application stylesheet:
|
|
|
|
```css
|
|
@import "@workspace/layout/globals.css";
|
|
```
|
|
|
|
## Compose regions {#compose}
|
|
|
|
`AppLayout` accepts React nodes or component definitions without required props. Pass a node when the region needs business props, or pass a component definition when it should read layout state from context.
|
|
|
|
```tsx
|
|
<AppLayout
|
|
header={AppHeader}
|
|
rail={ActivityRail}
|
|
sidebar={<NavigationSidebar groups={groups} />}
|
|
aside={AssistantPanel}
|
|
footer={StatusBar}
|
|
>
|
|
<RouterOutlet />
|
|
</AppLayout>
|
|
```
|
|
|
|
Component definitions are created inside the `AppLayout` provider, so `AppHeader` and `AssistantPanel` can call `useLayoutConfig`.
|
|
|
|
## Adjust sizes {#sizes}
|
|
|
|
Use CSS custom properties to size the supporting columns:
|
|
|
|
```css
|
|
.application-layout {
|
|
--layout-rail-width: 4rem;
|
|
--layout-sidebar-width: 18rem;
|
|
--layout-aside-width: 22rem;
|
|
}
|
|
```
|
|
|
|
Pass that class to `AppLayout`. The content column always consumes the remaining space and can shrink to zero width.
|