LayoutAppShell9 props
App Shell
The outermost layout for an application. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles res...
공식 문서 열기Preview
Skip to content
Workspace
AppShell composes top navigation, side navigation, and content.Import
import {AppShell} from '@astryxdesign/core/AppShell';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
The outermost layout for an application. Provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles res...
appshelllayoutscaffoldsidebarsidenavtopnavheadernavigation
Important props
contentPadding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10optional
heightfill | autooptional
variantwash | surface | section | elevatedoptional
Theming targets
astryx-app-shellastryx-app-shell-headerastryx-app-shell-sidenav
Best practices
- DoChoose the right height: use "fill" for dashboards with internal scrolling and "auto" for pages that grow with content.
- DoSet `contentPadding` based on content type: 4 for forms and settings, 0 for tables and dashboards.
- Do notNest one AppShell inside another; it's the outermost layout frame.
- Do notUse for sub-page layouts; use Layout for content areas within AppShell.