Visualización de datos

Notification feed stack

Notification feed stack: Una fuente vertical que revela tarjetas de notificación con un temporizador, deslizando las tarjetas más antiguas hacia abajo y dejando caer las más antiguas a medida que llegan las nuevas.

Cómo usar Notification feed stack

Notification feed stack se presenta con el formato de vista previa «tarjeta» y el tema «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`	`#FF6A1F`	Los metadatos no indican otro límite.
`interval`	`number`	`1200`	De 500 a 3000; paso 100
`maxVisible`	`number`	`4`	De 2 a 6; paso 1
`pauseOnHover`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Notification feed stack?

Notification feed stack 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 Notification feed stack?

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

¿Qué detalles de accesibilidad se observan en Notification feed stack?

El código React de Notification feed stack incluye: atributos y manejadores (aria-hidden, aria-label). 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 Notification feed stack el movimiento reducido?

Notification feed stack 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 Reflowing Notification Stack de Fieldbook, de la categoría Visualización de datos.

2412Reflowing Notification StackVisualización de datosUna pila de tarjetas de notificación que fluyen suavemente cuando se agrega una nueva o se descarta una antigua, en lugar de saltar.

Imagen fija del componente Concentric goal rings de Fieldbook, de la categoría Visualización de datos.

2128Concentric goal ringsVisualización de datosTres anillos de progreso anidados que se dibujan en secuencia junto a una lectura del valor objetivo y actual de cada objetivo.

2236Social proof avatar rowVisualización de datosUna fila apretada de círculos de avatar superpuestos que se cierran con una burbuja que suma a todos los que quedan fuera de la fila.

Imagen fija del componente Starred repos disclosure de Fieldbook, de la categoría Visualización de datos.

2244Starred repos disclosureVisualización de datosUna fila de encabezado con un botón de alternancia que revela una breve lista oculta de repositorios destacados debajo de una fila que siempre permanece visible.

Imagen fija del componente Animated metric counter de Fieldbook, de la categoría Visualización de datos.

2299Animated metric counterVisualización de datosUn gran número simple que surge desde un valor inicial hasta su objetivo en el momento en que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse, con separadores de miles y un sufijo opcional.

Imagen fija del componente Before/After Code Diff de Fieldbook, de la categoría Visualización de datos.

2113Before/After Code DiffVisualización de datosDos paneles de código uno al lado del otro, etiquetados antes y después, con líneas agregadas y eliminadas teñidas y un efecto de enfoque flotante.