App Shell

Каркас приложения. Бесплатно, MIT · Навигация и каркас › Каркас

Установка

npx valyro-cli@latest add app-shell

npx shadcn@latest add https://valyro.xyz/r/app-shell.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { AppShell } from 'valyro-ui';

Пропсы

Prop	Type	Default
`sidebar`	`Slot`		Navigation column, e.g. a `<Sidebar>`. A function receives the shell state (`sidebarCollapsed`, `mobile`…).
`header`	`Slot`		Top bar above the main area; stays put while the main area scrolls.
`aside`	`Slot`		Optional panel after the main area (details, inspector, settings).
`children`	`Slot`		Main content; it scrolls on its own. Or the compound form: `AppShell.Header`, `.Sidebar`, `.Main`, `.Aside` and `.Footer`, each holding what the prop of that name holds.
`footer`	`Slot`		Bar under the main area that stays put while it scrolls, e.g. a chat composer or bulk actions.
`sidebarCollapsed`	`boolean`		Icon-rail sidebar. Pair with `onSidebarCollapsedChange` (and storage) to remember it.
`defaultSidebarCollapsed`	`boolean`	`false`	Initial `sidebarCollapsed` when uncontrolled.
`onSidebarCollapsedChange`	`(collapsed: boolean) => void`		Called with the new `sidebarCollapsed` when it changes.
`asideOpen`	`boolean`		Whether the aside shows inline on wide shells.
`defaultAsideOpen`	`boolean`	`true`	Initial `asideOpen` when uncontrolled.
`onAsideOpenChange`	`(open: boolean) => void`		Called with the new `asideOpen` when it changes.
`mobileBreakpoint`	`number`	`768`	Below this shell width (px) the sidebar becomes an off-canvas drawer. Measured on the shell, not the window.
`asideBreakpoint`	`number`	`1200`	Below this shell width (px) the aside floats over the main area instead of taking a column.
`mainId`	`string`		Id of the main element, the skip link's target.
`labels`	`Partial<AppShellLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Составные части

AppShell.Header (AppShellHeader), AppShell.Sidebar (AppShellSidebar), AppShell.Main (AppShellMain), AppShell.Aside (AppShellAside), AppShell.Footer (AppShellFooter)

App Shell

Установка

Пропсы

Составные части

Похожие компоненты