레이아웃AppShell9 props
App Shell
App Shell는 상단 내비게이션, 사이드 내비게이션, 콘텐츠 영역을 하나의 앱 프레임으로 묶습니다.
공식 문서 열기미리보기
Skip to content
Workspace overview
Components93 live
Build statusHealthy
Import
import {AppShell} from '@astryxdesign/core/AppShell';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
사용 시점
App Shell는 상단 내비게이션, 사이드 내비게이션, 콘텐츠 영역을 하나의 앱 프레임으로 묶습니다.
appshelllayoutscaffoldsidebarsidenavtopnavheadernavigation
중요 props
contentPadding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10optional
heightfill | autooptional
variantwash | surface | section | elevatedoptional
테마 대상
astryx-app-shellastryx-app-shell-headerastryx-app-shell-sidenav
사용 지침
- 권장AppShell의 목적이 드러나도록 레이블과 보조 설명을 함께 제공하세요.
- 권장상태 변화가 필요한 경우 사용자가 바로 이해할 수 있는 피드백을 연결하세요.
- 피하기컴포넌트의 기본 상호작용을 우회해 키보드 흐름을 깨뜨리지 마세요.
- 피하기공간을 줄이기 위해 필요한 레이블이나 설명을 제거하지 마세요.