Introducing: Launchy!

Présentation : Launchy !

Avez-vous déjà besoin d'ajouter une fenêtre modale à votre application ou à votre site Web ? Vous n'avez pas le temps de le coder vous-même et vous ne savez pas quel script tiers ajouter ? Qu'est-ce que c'est? Vous voulez également vous assurer qu'il est entièrement accessible via un clavier et un lecteur d'écran ?

Ne cherchez plus, mon ami ! Lancement ! est un script de fenêtre modal entièrement accessible, super facile à mettre en œuvre et à utiliser. C'est gratuit et open source , bien testé, et ça marche !

Comment obtenir Launchy ?

Il existe plusieurs façons de mettre la main sur une copie de Launchy ! :

Fichier brut inclus

  1. Copiez et collez la source de launchy.js dans un nouveau fichier JavaScript de votre projet.

  2. Incluez le script dans votre modèle :

     <script src="js/launchy.js"></script>

Via le MNP

La meilleure approche serait probablement d'utiliser npm pour installer le script. De cette façon, vous obtenez automatiquement la dernière version dès qu'elle est disponible !

  1. Exécutez la commande :

     npm i launchy-modal- window

    Cela installera le script dans votre répertoire node_modules .

  2. Incluez le script dans votre modèle :

     <script src="node_modules/launchy-modal-window/launchy.js"></script>

Maintenant que je l'ai, comment l'utiliser ?

Utiliser Launchy ! c'est hyper facile !

  1. Ajoutez votre contenu HTML à votre page ou à votre modèle que vous souhaitez voir apparaître dans la fenêtre modale, ou recherchez du contenu existant.

    Exemple:

     <h2>Top 5 Most "Popular" Websites</h2> <ul> <li>Google.com</li> <li>Youtube.com</li> <li>Facebook.com</li> <li>Baidu.com</li> <li>Wikipedia.org</li> </ul>

  2. Maintenant, enveloppez simplement votre contenu avec un conteneur HTML avec un attribut data-launchy . Vous avez également besoin d'un attribut data-launchy-text qui se traduit par le texte de contrôle du lanceur :

     <div data-launchy data-launchy-text="Popular websites!"> <h2>Top 5 Most "Popular" Websites</h2> <ul> <li>Google.com</li> <li>Youtube.com</li> <li>Facebook.com</li> <li>Baidu.com</li> <li>Wikipedia.org</li> </ul> </div>

C'est ça! Lancement ! détectera cette div avec les attributs data-launchy-* et générera tout ce qui est nécessaire pour construire la fenêtre modale pour vous !

Une note sur le style

Lancement ! n'est livré avec aucun style par défaut, mais propose de nombreuses classes CSS auxquelles vous pouvez vous connecter !

Consultez le fichier démo styles.scss pour un exemple d'utilisation des classes disponibles. Sinon, essayez un style personnalisé sur la démo CodePen !

  • Découvrez le code source sur GitHub !
  • Vous pouvez essayer cet exemple HTML sur la démo CodePen !

Dites-moi ce que vous en pensez et si vous l'essayez, comment ça s'est passé ! Trouver un bug ou avoir une idée ? N'hésitez pas à ouvrir un nouveau sujet !

Bon piratage ! 💻😄💖

Retour au blog