Sidebar Layout
A composable, responsive sidebar layout that you can copy and paste into your apps.
Uso
La demo de arriba es la composición completa del shell de página; esto es la forma mínima.
Referencia de la API
VoltSidebar — volt-sidebar
| Entrada | Tipo | Por defecto |
|---|---|---|
| width | string | — |
| collapsedWidth | string | — |
| class | string | '' |
VoltSidebarHeader — volt-sidebar-header
| Entrada | Tipo | Por defecto |
|---|---|---|
| class | string | '' |
VoltSidebarContent — volt-sidebar-content
| Entrada | Tipo | Por defecto |
|---|---|---|
| class | string | '' |
VoltSidebarGroup — volt-sidebar-group
| Entrada | Tipo | Por defecto |
|---|---|---|
| label | string | — |
| class | string | '' |
VoltSidebarItem — volt-sidebar-item
| Entrada | Tipo | Por defecto |
|---|---|---|
| routerLink * | string | — |
| queryParams | Record<string, string> | undefined | undefined |
| label * | string | — |
| exact | boolean | false |
| class | string | '' |
VoltSidebarFooter — volt-sidebar-footer
| Entrada | Tipo | Por defecto |
|---|---|---|
| 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.
Configurar el ancho
Recurre a la custom property cuando el ancho sea dinámico o se fije desde fuera de Angular.
Código del componente
npx @voltui/cli add sidebarCopia este código en tu proyecto. VoltSidebarService guarda el estado plegado/abierto en móvil como signals; nada más en el layout depende de Angular Router más allá de routerLink.