Shepherd.js : une bibliothèque pour créer des visites guidées des applications Web

Par:
fredericmazue

ven, 11/03/2022 - 12:44

Shepherd est une bibliothèque JavaScript pour mettre en place des visites guidées pour les utilisateurs de votre application Web. Sheperd.js utilise Popper.js, une autre bibliothèque open source, pour effectuer le rendu des dialogues pour chaque étape de la visite.

L'intégration de la bibliothèque se résume à l'inclusion du fichier shepherd.js. Les styles sont embarqués dans le fichier. Les styles de Shepherd sont réduits au minimum, ce qui vous permet de personnaliser facilement.

Pour mettre en place une visite guidée, il suffit de créer une instance 'Tour' et d'ajouter les étapes que vous voulez. par exemple :

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    cancelIcon: {
      enabled: true
    },

    classes: 'class-1 class-2',
    scrollTo: { behavior: 'smooth', block: 'center' }
  }
});

tour.addStep({
  title: 'Creating a Shepherd Tour',
  text: `Creating a Shepherd tour is easy. too!\
  Just create a \`Tour\` instance, and add as many steps as you want.`,
  attachTo: {
    element: '.hero-example',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});

tour.start();

Shepherd.js est un logiciel libre sous licence MIT disponible sur GitHub. La bibliothèque est documentée sur le site officiel de Shepherd.js

Site : shepherdjs.dev