Exemples : chaque motif, en direct, avec la source complète
Chaque exemple est une démo fonctionnelle du paquet npm publié plus le fichier complet qui se trouve derrière : prêt à copier-coller, et modifiable en direct dans Storybook. Rendu côté serveur comme tout le reste de ce site.
Bases
- DémarrageLe menu minimal : éléments, deux flèches, visibilité prête à l’emploi.
- Un élément par vueUn menu de la largeur d’un élément — une carte remplit la rangée.
- Défiler un élément à la foisLes flèches avancent d’un seul élément au lieu d’une page entière.
- Flèches sous le menuLes flèches sont vos composants — placez-les où vous voulez.
Position et défilement
- Centrer l’élément cliquéscrollToItem avec inline: center — le motif des onglets défilables.
- Défiler vers un élément par idAccédez au menu depuis l’extérieur avec apiRef.
- Sauvegarder et restaurer la position de défilementGardez le décalage de défilement entre démontages et rechargements.
- Animation de défilement personnaliséeApportez votre propre easing et durée pour les défilements programmatiques.
- Indicateur de progression du défilementUne barre de progression pilotée par les éléments visibles.
Entrée et gestes
- Glisser pour défiler à la sourisUn glisser à la souris qui laisse les clics fonctionner.
- Balayer sur ordinateurUn balayage avec inertie pour les utilisateurs de souris.
- Masquer les flèches sur mobileDéfilement au seul toucher sur petits écrans, flèches sur ordinateur.
- Empêcher le défilement du bodyLa molette sur le menu fait défiler le menu, pas la page.
Éléments dynamiques
- Charger plus quand la fin apparaîtAjout infini piloté par la visibilité du dernier élément.
- Ajouter un élément et défiler vers luiLe motif des puces de filtre : ajouter, puis amener à la vue.
- Animer les éléments à l’entrée et à la sortieAnimations d’ajout/suppression avec @formkit/auto-animate.
- 5 000 éléments et toujours rapideLe défilement natif s’adapte — pas besoin de virtualisation ici.