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
Copiez et collez la source de
launchy.js
dans un nouveau fichier JavaScript de votre projet.-
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 !
-
Exécutez la commande :
npm i launchy-modal- window
Cela installera le script dans votre répertoire
node_modules
. -
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 !
-
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>
-
Maintenant, enveloppez simplement votre contenu avec un conteneur HTML avec un attribut
data-launchy
. Vous avez également besoin d'un attributdata-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 ! 💻😄💖