Botones

Travelling knob follow button

Travelling knob follow button: Una píldora delineada cuya perilla redonda rueda hasta el otro extremo al pasar el mouse, pintando una pista de acento detrás de ella y deslizando un conteo de seguidores a la vista; hacer clic mantiene el estado seguido y aumenta el recuento.

Cómo usar Travelling knob follow button

Travelling knob follow button 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
`label`	`text`	`Follow`	Hasta 20 caracteres
`count`	`text`	`1.2k`	Hasta 10 caracteres
`accent`	`color`	`#7C5CFF`	Los metadatos no indican otro límite.
`travelMs`	`number`	`500`	De 200 a 1200; paso 20
`followed`	`boolean`	`false`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Travelling knob follow button?

Travelling knob follow button 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 Travelling knob follow button?

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

¿Qué detalles de accesibilidad se observan en Travelling knob follow button?

El código React de Travelling knob follow button incluye: elementos nativos (button); 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 Travelling knob follow button el movimiento reducido?

Travelling knob follow button consulta la preferencia de movimiento en su código React mediante matchMedia(prefers-reduced-motion). 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 Follow count swipe de Fieldbook, de la categoría Botones.

2492Follow count swipeBotonesUna tableta de seguimiento delineada cuya insignia decorativa redonda se desliza hacia el otro extremo al pasar el mouse, dibujando una banda que revela el recuento de seguidores; al hacer clic se confirma el seguimiento con un sello y se aumenta el conteo.

Imagen fija del componente Amber upload pill de Fieldbook, de la categoría Botones.

2707Amber upload pillBotonesUna cálida pastilla de carga en degradado con un borde brillante que amplía su tono de color e ilumina la etiqueta desde atrás al pasar el mouse.

Imagen fija del componente Arrow to label pill de Fieldbook, de la categoría Botones.

2469Arrow to label pillBotonesUn botón redondo de chevrón que se extiende hasta convertirse en una píldora ancha etiquetada al pasar el cursor, intercambiando la marca por una palabra mientras el relleno plano se convierte en una rampa de dos paradas.

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 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 Draining fill button de Fieldbook, de la categoría Botones.

2588Draining fill buttonBotonesUna pastilla delineada que comienza completamente inundada de color y drena hasta una banda delgada en el pie al pasar el mouse, luego se vuelve a llenar desde abajo al salir.