Acciones

Control segmentado

Permite elegir una opción entre un grupo pequeño y cerrado de alternativas, todas visibles a la vez. Se usa en vez de un select cuando hay pocas opciones y conviene poder compararlas de un vistazo.

Uso

Cada hijo directo de <vadavo-segmented-control> es un button, porque elegir una opción es una selección y no una navegación. El propio elemento marca la opción pulsada con data-pressed (sin clase adicional) y dispara un evento change.

Píldora

La variante por defecto: las opciones van en la letra de exposición, dentro de una píldora con borde, y la pulsada toma el color de fondo, el borde y el color de texto que marcan al elemento actual.

<vadavo-segmented-control>
    <button data-pressed>Particulares</button>
    <button>Empresas</button>
</vadavo-segmented-control>

Selector de periodo

El atributo variant="period" coloca las opciones sobre una pista tenue, sin borde alrededor y en la letra de lectura. La opción pulsada se rellena igual que en la variante por defecto.

<vadavo-segmented-control variant="period">
    <button data-pressed>Mensual</button>
    <button>Anual</button>
</vadavo-segmented-control>