Sidebar Layout
A composable, responsive sidebar layout that you can copy and paste into your apps.
Використання
Демонстрація вище — це повна композиція оболонки сторінки; тут наведено мінімальну форму.
Довідник API
VoltSidebar — volt-sidebar
| Вхід | Тип | За замовчуванням |
|---|---|---|
| width | string | — |
| collapsedWidth | string | — |
| class | string | '' |
VoltSidebarHeader — volt-sidebar-header
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
VoltSidebarContent — volt-sidebar-content
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
VoltSidebarGroup — volt-sidebar-group
| Вхід | Тип | За замовчуванням |
|---|---|---|
| label | string | — |
| class | string | '' |
VoltSidebarItem — volt-sidebar-item
| Вхід | Тип | За замовчуванням |
|---|---|---|
| routerLink * | string | — |
| queryParams | Record<string, string> | undefined | undefined |
| label * | string | — |
| exact | boolean | false |
| class | string | '' |
VoltSidebarFooter — volt-sidebar-footer
| Вхід | Тип | За замовчуванням |
|---|---|---|
| class | string | '' |
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.