Botones

Spin Off Thanks

Spin Off Thanks: Una llamada a la acción de dos caras en la que la cara superior gira y cae mientras una segunda cara se eleva detrás para tomar el control.

Hover to preview the hand-off. With latching on, a click keeps the thank-you face up.

Cómo usar Spin Off Thanks

Spin Off Thanks 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
`frontLabel`	`text`	`SUBSCRIBE`	Hasta 18 caracteres
`backLabel`	`text`	`THANK YOU`	Hasta 18 caracteres
`accent`	`color`	`#FF4D8D`	Los metadatos no indican otro límite.
`backColor`	`color`	`#7C5CFF`	Los metadatos no indican otro límite.
`spinDegrees`	`number`	`290`	De 0 a 360; paso 10
`latchOnClick`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Spin Off Thanks?

Spin Off Thanks 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 Spin Off Thanks?

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

¿Qué detalles de accesibilidad se observan en Spin Off Thanks?

El código React de Spin Off Thanks incluye: atributos y manejadores (aria-hidden, aria-pressed). 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 Spin Off Thanks el movimiento reducido?

Spin Off Thanks 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 Share toggle chip de Fieldbook, de la categoría Botones.

2035Share toggle chipBotonesUn chip empotrado que pasa de una invitación a un estado confirmado al hacer clic, y su glifo supera su tamaño completo antes de asentarse.

Imagen fija del componente Captioned Like Button de Fieldbook, de la categoría Botones.

2550Captioned Like ButtonBotonesUn botón de corazón solo con ícono que revela un título que se eleva desde abajo al pasar el cursor o al enfocar, y se llena con un rápido sobrepaso cuando se desea.

Imagen fija del componente Check stroke submit de Fieldbook, de la categoría Botones.

2594Check stroke submitBotonesUn botón de envío compacto y relleno cuya marca de verificación inicial se dibuja trazo a trazo cuando la acción se realiza correctamente.

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 Counting follow chip de Fieldbook, de la categoría Botones.

2472Counting follow chipBotonesUn chip delineado que empareja una etiqueta con un conteo de seguidores, haciendo rodar los dígitos modificados hacia arriba a través de una ventana enmascarada cuando se cierra y hacia abajo cuando se suelta.

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.