Sidebar Layout
A composable, responsive sidebar layout that you can copy and paste into your apps.
Використання
Демонстрація вище — це повна композиція оболонки сторінки; тут наведено мінімальну форму.
Довідник API
| Вхід | Тип | За замовчуванням |
|---|---|---|
| width | string | — |
| collapsedWidth | string | — |
| label | string | — |
| routerLink * | string | — |
| queryParams | Record<string, string> | undefined | undefined |
| exact | boolean | false |
Width
The sidebar is 18rem expanded and 4rem collapsed by default. Override either one with the width / collapsedWidth inputs, or globally with the --volt-sidebar-width / --volt-sidebar-collapsed-width custom properties — useful for a resizable sidebar, where you drive the custom property from a drag handle. Inputs win over custom properties, and both accept any CSS length.
Налаштування ширини
Беріть custom property, коли ширина динамічна або задається поза Angular.
Код компонента
npx @voltui/cli add sidebarСкопіюйте цей код у свій проєкт. VoltSidebarService тримає стан згортання та відкриття на мобільному як signals; більше ніщо в макеті не залежить від Angular Router, окрім routerLink.