Ejemplos: cada patrón, en vivo, con la fuente completa
Cada ejemplo es una demo funcional del paquete npm publicado más el archivo completo que la respalda: listo para copiar y pegar, y editable en vivo en Storybook. Renderizado en el servidor como todo lo demás de este sitio.
Básicos
- Primeros pasosEl menú mínimo: elementos, dos flechas, visibilidad lista para usar.
- Un elemento por vistaUn menú del ancho de un elemento: una tarjeta llena la fila.
- Desplazarse de un elemento en unoLas flechas avanzan un solo elemento en lugar de una página completa.
- Flechas debajo del menúLas flechas son tus componentes: colócalas donde quieras.
Posición y desplazamiento
- Centrar el elemento clicadoscrollToItem con inline: center — el patrón de pestañas desplazables.
- Desplazarse a un elemento por idLlega al menú desde fuera con apiRef.
- Guardar y restaurar la posición de desplazamientoMantén el desplazamiento entre desmontajes y recargas de página.
- Animación de desplazamiento personalizadaTrae tu propio easing y duración para los desplazamientos programáticos.
- Indicador de progreso de desplazamientoUna barra de progreso impulsada por qué elementos son visibles.
Entrada y gestos
- Arrastrar para desplazarse con el ratónArrastre con el ratón que sigue dejando funcionar los clics.
- Deslizar en escritorioDeslizamiento con inercia para usuarios de ratón.
- Ocultar las flechas en móvilDesplazamiento solo táctil en pantallas pequeñas, flechas en escritorio.
- Evitar el desplazamiento del bodyLa rueda sobre el menú desplaza el menú, no la página.
Elementos dinámicos
- Cargar más cuando aparece el finalAñadido infinito impulsado por la visibilidad del último elemento.
- Añadir un elemento y desplazarse a élEl patrón de chips de filtro: añadir y luego traer a la vista.
- Animar elementos al entrar y salirAnimaciones de añadir/eliminar con @formkit/auto-animate.
- 5.000 elementos y sigue siendo rápidoEl desplazamiento nativo escala — aquí no hace falta virtualización.