Maofeng
68 lines
2.2 KiB
Plaintext
68 lines
2.2 KiB
Plaintext
---
|
|
title: Overview
|
|
description: Build application layouts with optional regions and persistent configuration.
|
|
order: 1
|
|
toc:
|
|
- id: role
|
|
title: Package role
|
|
- id: regions
|
|
title: Layout regions
|
|
- id: config
|
|
title: Configuration and hook
|
|
---
|
|
|
|
## Package role {#role}
|
|
|
|
`@workspace/layout` provides the router-neutral `AppLayout`. It composes an application header, navigation rail, sidebar, content, aside, and footer with CSS Grid, then resolves the effective grid from the currently visible regions. The package does not create navigation data, constrain the router, or persist user preferences.
|
|
|
|
Import the Tailwind source from the application stylesheet:
|
|
|
|
```css
|
|
@import "@workspace/layout/globals.css";
|
|
```
|
|
|
|
## Layout regions {#regions}
|
|
|
|
```tsx
|
|
import { AppLayout } from "@workspace/layout"
|
|
|
|
export function Application() {
|
|
return (
|
|
<AppLayout
|
|
header={AppHeader}
|
|
rail={ActivityRail}
|
|
sidebar={NavigationSidebar}
|
|
aside={AssistantPanel}
|
|
footer={StatusBar}
|
|
defaultLayout={{ asideOpen: true }}
|
|
>
|
|
<RouterOutlet />
|
|
</AppLayout>
|
|
)
|
|
}
|
|
```
|
|
|
|
`children` is the only required content region. The sidebar can collapse, while the aside suits assistants, documentation, and inspectors. The header can begin at the rail, sidebar, or content; the footer can begin at the sidebar or content. A missing preceding region automatically moves the effective start inward.
|
|
|
|
## Configuration and hook {#config}
|
|
|
|
`layout` accepts `Partial<LayoutConfig>`. Supplying it enables controlled mode; otherwise `AppLayout` initializes internal state from `defaultLayout`. Region components can call `useLayoutConfig`:
|
|
|
|
```tsx
|
|
import { useLayoutConfig } from "@workspace/layout"
|
|
|
|
export function AppHeader() {
|
|
const { layout, toggleAside, toggleSidebar } = useLayoutConfig()
|
|
|
|
return (
|
|
<nav>
|
|
<button onClick={toggleSidebar}>Sidebar</button>
|
|
<button onClick={toggleAside}>Assistant</button>
|
|
<output>{layout.headerStart}</output>
|
|
</nav>
|
|
)
|
|
}
|
|
```
|
|
|
|
Temporarily hiding or disabling a region only changes the effective layout; it does not overwrite the original preference stored in `LayoutConfig`. The configuration can therefore integrate safely with `@workspace/preferences`.
|