Desplazamiento

Scroll progress rail

Una barra fina fijada en la parte superior de un panel desplazable que se llena de izquierda a derecha en sincronización exacta con la distancia que se desplaza el contenido y regresa cuando se desplaza hacia arriba.

Release notes

Version 2.6: the registry rebuild

This cycle was about the pipeline more than the pixels. The catalog is now derived from the component folders at build time, so a meta fix and the site copy can never drift apart again. Every entry carries its own plate number, and the ports are compiled and smoke rendered before anything ships to the public index.

Highlights

The build got a lenient mode. A folder with findings is now skipped and reported instead of taking the whole catalog down with it, which turned a bad Tuesday into a one line fix. Pages resolve by plate number everywhere, including the agent surface, so old links keep working after a rename.

Entries in the catalog

302

Frameworks per entry

Changelog

Sep 4Registry build skips lenient folders instead of aborting the whole catalog.
Sep 3Component pages resolve by plate number in the index and on the agent surface.
Sep 2Button and media pages regenerated on the cloud pool and verified by hand.
Sep 1Port reports only count an entry as written once its closing tag lands.
Aug 30Thumbnail pass adds a webp render for every new component in the batch.
Aug 29Wave 5 components checked in, one hundred and sixty of them.

Known quirks

The thumbnail renderer still races the catalog write on very large waves, so a handful of cards can ship with a stale frame for a few minutes. A fix is queued for the next batch. Port tests on the server rendered frameworks are slower than they need to be; the plan is to share one headless browser across the whole run.

End of the notes. Scroll back up and watch the rail drain.

Scroll or drag inside the panel. The rail fills as you read and drains when you go back.

Cómo usar Scroll progress rail

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: color, thickness, showTrack

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

La vista previa y la descripción son públicas. Inicia sesión con una cuenta autorizada para abrir el código, las versiones y el panel de instalación.

Conecta tu agente

Relacionados

1873Parallax plate galleryDesplazamientoUna galería vertical donde el número de índice de gran tamaño de cada placa se desplaza a un ritmo diferente al de la propia placa, con un riel de progreso de desplazamiento a lo largo de la parte inferior.

1874Pinned lateral galleryDesplazamientoUna sección que se mantiene en su lugar mientras se desplaza verticalmente arrastrando una fila de paneles hacia los lados, luego se suelta y deja que la página continúe.

1881Scroll expand stageDesplazamientoUn pequeño marco redondeado crece para llenar toda la ventana gráfica a medida que se desplaza, su título se eleva mientras el artículo que se encuentra debajo se desvanece.

1882Scroll focus columnDesplazamientoUna columna de desplazamiento donde cada fila se desvanece y se reduce a medida que sale de la banda de lectura y vuelve a su presencia total cuando ingresa, por lo que solo el medio es completamente sólido.

1843Blur fade revealDesplazamientoContenido que llega desenfocado y transparente, luego se enfoca en su lugar la primera vez que se desplaza a la vista sin mover un solo píxel.

1855Enter view revealDesplazamientoBloques que se deslizan y se desvanecen en el momento en que aparecen a la vista y se reinician una vez que salen, por lo que la revelación se reproduce nuevamente en cada pase.