Sidebar
Uso
SSidebar es un componente compuesto de navegacion que gestiona el estado del elemento activo mediante v-model. Soporta grupos colapsables (SSidebarItemGroup), divisores de seccion (SSidebarSeparator) y elementos de navegacion individuales (SSidebarItem). Usa placetopayHeader para mostrar el logo predeterminado de PlaceToPay, o proporciona un slot header personalizado.
Grupos
Usa SSidebarItemGroup para crear secciones colapsables. Por defecto, los grupos usan comportamiento de acordeon (accordion es true), lo que envuelve los elementos hijos en un SAccordion. Establece accordion en false para renderizar una lista simple que siempre es visible.
Separador
Usa SSidebarSeparator para agregar divisores horizontales con etiqueta entre las secciones del sidebar. La prop title establece el texto del encabezado de seccion.
Props de SSidebar
| Prop | Tipo | Por defecto | Descripcion |
|---|---|---|---|
modelValue | string | - | El valor de la ruta activa, vinculado con v-model |
class | string | - | Clases CSS adicionales para el contenedor del sidebar |
placetopayHeader | boolean | (() => any) | false | Muestra el logo de PlaceToPay en el encabezado. Pasa una funcion para hacer el encabezado clicable |
nested | boolean | - | Marca el sidebar como anidado (uso interno) |
Props de SSidebarItem
| Prop | Tipo | Por defecto | Descripcion |
|---|---|---|---|
as | string | Component | 'button' | El elemento o componente como el cual renderizar |
path | string | - | Identificador unico de ruta para el elemento. Por defecto usa el contenido de texto del elemento |
icon | FunctionalComponent | - | Componente de icono mostrado antes de la etiqueta |
active | boolean | false | Fuerza al elemento a mostrarse como activo |
Props de SSidebarItemGroup
| Prop | Tipo | Por defecto | Descripcion |
|---|---|---|---|
as | string | Component | 'button' | El elemento o componente como el cual renderizar |
path | string | - | Identificador unico de ruta para el grupo. Por defecto usa el texto del slot title |
icon | FunctionalComponent | - | Componente de icono mostrado antes del titulo del grupo |
active | boolean | false | Fuerza al grupo a mostrarse como activo |
accordion | boolean | true | Cuando es true, los hijos se envuelven en un acordeon que colapsa/expande al hacer clic |
Props de SSidebarSeparator
| Prop | Tipo | Por defecto | Descripcion |
|---|---|---|---|
title | string | - | Texto del encabezado de seccion mostrado debajo de la linea horizontal |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | string | Emitido cuando la ruta activa cambia |
Slots
Slots de SSidebar
| Nombre | Descripcion |
|---|---|
default | Elementos de navegacion, grupos y separadores |
header | Contenido personalizado del encabezado (reemplaza el logo de PlaceToPay) |
footer | Contenido del pie fijado en la parte inferior del sidebar |
Slots de SSidebarItemGroup
| Nombre | Descripcion |
|---|---|
default | Componentes SSidebarItem hijos |
title | Texto del titulo del grupo |