Estructura y Layout
ButtonGroup
Un grupo de botones conectados para alternar entre opciones, navegacion o acciones.
Tests
0%
Uso
El componente SButtonGroup renderiza un grupo de botones conectados. Usa hijos SButtonGroupItem para definir cada boton. Establece first y last en los elementos extremos para un correcto redondeo de bordes.
Con Iconos
Usa la prop icon en SButtonGroupItem para mostrar un icono junto al texto del boton.
Navegacion
Usa las props prev y next para renderizar botones de navegacion con flechas.
Deshabilitado
Establece disabled en true en elementos individuales para evitar la interaccion.
Props
SButtonGroup
El componente contenedor no tiene props. Renderiza un <div> con disposicion inline flex.
SButtonGroupItem
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
active | boolean | false | Resalta el boton como activo |
disabled | boolean | false | Deshabilita el boton |
first | boolean | false | Redondea el borde izquierdo |
last | boolean | false | Redondea el borde derecho |
prev | boolean | false | Renderiza un boton de navegacion con flecha izquierda |
next | boolean | false | Renderiza un boton de navegacion con flecha derecha |
icon | FunctionalComponent | - | Componente de icono a mostrar |
endIcon | boolean | false | Coloca el icono despues del texto |
as | string | Component | 'button' | El elemento o componente a renderizar |
class | string | - | Clases CSS adicionales |
Slots
SButtonGroup
| Nombre | Descripcion |
|---|---|
default | Componentes SButtonGroupItem |
SButtonGroupItem
| Nombre | Descripcion |
|---|---|
default | Contenido de texto del boton |