AppShell
@stellaria/nebula-webAppShellPropsPreview
Preview
Props
28| Prop | Type | Default |
|---|---|---|
aside | ReactNode | — |
asideWidth | number | 300 |
backdrop Decorative layer behind everything: this is where a `StarField` lives. | ReactNode | — |
children | ReactNode | — |
chromeHeight | number | — |
className | string | — |
collapsedWidth | number | 0 |
collapsible | boolean | true |
contentId | string | — |
contentWidth Bounds the rail grid — bar and content together — and centres it. Only the surfaces stay full-bleed. Rail layout only. | Unit | — |
defaultNavbarOpened | boolean | true |
footer | ReactNode | — |
header | ReactNode | — |
headerHeight | number | 56 |
labels | Partial<AppShellLabels> | — |
mainRef The `main` is what scrolls in the rail layout; it is exposed so you can hook a parallax background to it. | RefObject<HTMLElement | null> | — |
navbar | ReactNode | — |
navbarOpened | boolean | — |
navbarWidth | number | 260 |
onNavbarChange | ((opened: boolean) => void) | — |
padded | boolean | true |
railCollapse What the rail does when the viewport stops fitting it (ADR-153). `"mini"` shrinks it to icons below `laptop` and lays it out as a bottom bar below `tablet`. `"hidden"` withdraws it below `laptop` and reserves no space for it — the shell cannot know its links are reachable, so pass this only when another surface below that point carries them. Rail layout only. | AppShellRailCollapse | "mini" |
scrollShadow Shadow sail at the start of the scrolling area; it appears under the chrome, not over it. | boolean | true |
scrollShadowOffset The height the sail sticks from: use it to keep it beneath sticky chrome. | number | 0 |
sidebar Full-height bar. Its presence switches the shell to the rail layout. | ReactNode | — |
sidebarCollapsed Third rail state: the bar shrinks to `sidebarMiniWidth` and its labels are hidden. | boolean | false |
sidebarMiniWidth | number | 76 |
sidebarWidth | number | 320 |
Slot props
4Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
chromeProps The top chrome band. Only exists in the rail layout, and only with a `header`. | BoxSlotProps | — |
mainProps The `main`. In the rail layout it is also what scrolls; its ref goes separately, through `mainRef`. | BoxSlotProps | — |
scrollShadowProps The shadow sail at the start of the scrolling area. Rail layout only, and only with `scrollShadow`. | BoxSlotProps | — |
skipProps The skip-to-content link, visible only when focused. It exists in both layouts. | Omit<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> | — |
Parts
3AppShell.BodyAppShell.FooterAppShell.HeaderAlso accepts
On top of its own props, this component forwards these groups.