Vibeset

Selector de goma

Para alternar entre dos y cuatro vistas del mismo contenido. La pieza que señala la opción viaja hasta la nueva, se estira en el sentido del viaje mientras va deprisa y se encoge de alto para conservar su volumen. El movimiento es un muelle, no una transición, porque una transición no sabe a qué velocidad va y el estiramiento sale de esa velocidad; además un muelle redirige a media trayectoria si cambias de opción antes de llegar, conservando la velocidad. El estiramiento es la velocidad entre un tope, así que parada la pieza mide lo que mide. El bucle solo corre mientras algo se mueve. Arrastrar y pulsar son lo mismo: menos de cuatro píxeles es un clic, más es un arrastre y al soltar se elige la opción más cercana. Es un radiogroup de verdad con flechas.

Y el original de React Bits: Rubber Segment

Esta pieza está escrita desde cero en Vibeset: no se ha copiado ni portado nada de React Bits. Hace algo parecido a su Rubber Segment, y esto es lo que vimos del suyo por si prefieres usar el original.

Cuándo sí

Para alternar entre dos y cuatro vistas del mismo contenido (lista y rejilla, mes y semana), en una interfaz que ya sea juguetona.

Ojo con

Es un control segmentado en píldora: si tu interfaz usa pestañas de texto con una raya debajo, es otro lenguaje y mezclarlos se nota.

Accesibilidad

Diez señales aria, tres etiquetas, teclado y movimiento reducido. Pide un aria-label para el grupo.