Botones

Twin Sweep Tile

Twin Sweep Tile: Un mosaico de contorno cuadrado que se inclina a medida que se levanta, pasa dos bandas de luz inclinadas a través de sí mismo en direcciones opuestas y cambia su glifo por un título.

Cómo usar Twin Sweep Tile

Twin Sweep Tile se presenta con el formato de vista previa «en línea» y el tema «claro/oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`accent`	`color`	`#3DDC97`	Los metadatos no indican otro límite.
`label`	`text`	`Powered by`	Hasta 24 caracteres
`caption`	`text`	`Beacon Two`	Hasta 24 caracteres
`tilt`	`number`	`1`	De 0 a 4; paso 0.5
`sweep`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Twin Sweep Tile?

Twin Sweep Tile está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Twin Sweep Tile?

Los metadatos de React indican estas dependencias npm además de React: motion, clsx.

¿Qué detalles de accesibilidad se observan en Twin Sweep Tile?

El código React de Twin Sweep Tile incluye: atributos y manejadores (aria-hidden, aria-label, onKeyDown, onKeyUp); comparaciones de teclas (Enter, Space). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Twin Sweep Tile el movimiento reducido?

Twin Sweep Tile consulta la preferencia de movimiento en su código React mediante useReducedMotion(). Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Collapsing share button de Fieldbook, de la categoría Botones.

2553Collapsing share buttonBotonesUna píldora etiquetada que se reduce a un glifo redondo mientras una tira de mosaicos de enlaces flota en el espacio que dejó.

Imagen fija del componente Channel tile row de Fieldbook, de la categoría Botones.

2313Channel tile rowBotonesUna fila envolvente de mosaicos de íconos cuadrados debajo de un título pequeño, donde cada mosaico se funde con su propio color reservado al pasar el mouse.

Imagen fija del componente Destructive sweep button de Fieldbook, de la categoría Botones.

2696Destructive sweep buttonBotonesUna acción de eliminación cuyo sombreado de rosa a carmesí se desplaza de un extremo a otro al pasar el mouse, inclinando la tapa del contenedor, con una línea opcional de retención para confirmar a lo largo del borde inferior.

Imagen fija del componente Diagonal wedge button de Fieldbook, de la categoría Botones.

2676Diagonal wedge buttonBotonesUn botón cuadrado relleno por una cuña triangular que crece en diagonal hasta cubrir todo el rostro.

Imagen fija del componente Flip face button de Fieldbook, de la categoría Botones.

1633Flip face buttonBotonesUn botón con dos caras que intercambia una por la otra en un giro tridimensional, invirtiendo su posición cuando el puntero sale.

Imagen fija del componente Hinged progress button de Fieldbook, de la categoría Botones.

2688Hinged progress buttonBotonesUn botón cuya cara gira hacia atrás al pasar el mouse, exponiendo una bandeja donde una barra de progreso llena ráfagas desiguales y se desvanece en todo su ancho.