Campos de entrada

Shape wipe theme toggle

Shape wipe theme toggle: Un botón con el ícono del sol y la luna que cambia el tema del panel con una forma que crece desde el botón, intercambia los colores cuando está completamente cubierto y luego se encoge.

Appearance

How Nightjar Docs looks on this device.

Panels, menus and the editor follow this theme everywhere you sign in.

Cómo usar Shape wipe theme toggle

Shape wipe theme toggle 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
`shape`	`select`	`circle`	Opciones: circle, diamond, hexagon, square, star
`duration`	`number`	`500`	De 200 a 1000; paso 50
`accentColor`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`fromCenter`	`boolean`	`false`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Shape wipe theme toggle?

Shape wipe theme toggle 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 Shape wipe theme toggle?

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

¿Qué detalles de accesibilidad se observan en Shape wipe theme toggle?

El código React de Shape wipe theme toggle incluye: elementos nativos (button); atributos y manejadores (aria-hidden, aria-label, 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 Shape wipe theme toggle el movimiento reducido?

Shape wipe theme toggle 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

1980Icon crossfade switchCampos de entradaUn interruptor de palanca cuyo ícono del pulgar se desvanece y se escala hasta convertirse en un ícono diferente a medida que el interruptor cambia entre encendido y apagado.

Imagen fija del componente Latching square toggle de Fieldbook, de la categoría Campos de entrada.

2808Latching square toggleCampos de entradaUn botón de icono cuadrado compacto que se engancha entre un estado apagado con un contorno tenue y un estado presionado lleno de acento sólido.

Imagen fija del componente Addon Input Group de Fieldbook, de la categoría Campos de entrada.

2297Addon Input GroupCampos de entradaUn campo de texto envuelto en un caparazón con borde que puede contener un ícono inicial, un botón final o texto, y comparte un anillo de enfoque en todo el grupo.

Imagen fija del componente Appointment Range Card de Fieldbook, de la categoría Campos de entrada.

2108Appointment Range CardCampos de entradaUna tarjeta que combina una cuadrícula de fecha de un solo mes con un campo de hora de inicio y hora de finalización debajo, para seleccionar un día más una ventana de tiempo en un bloque compacto.

Imagen fija del componente Auto Grow Textarea de Fieldbook, de la categoría Campos de entrada.

2792Auto Grow TextareaCampos de entradaUn campo de texto de varias líneas que crece a medida que la persona escribe más, en lugar de desplazarse dentro de un cuadro fijo.

Imagen fija del componente Birthdate popover picker de Fieldbook, de la categoría Campos de entrada.

2305Birthdate popover pickerCampos de entradaUn botón etiquetado que abre un calendario flotante con menús desplegables de meses y años para llegar rápidamente a un año de nacimiento, cerrándose en el momento en que se elige un día.