Qu'arrive-t-il à votre processus de développement Web lorsque vous pouvez vous concentrer sur la conception de vues et cesser de réfléchir à la façon de les assembler? Les garnitures par Postlight sont une bibliothèque JavaScript zéro configuration qui ajoute une couche d'interaction en pages fluide et rapide à vos pages Web. Tout ce que vous avez à faire est d'ajouter quelques conseils au HTML que vous avez déjà.
En savoir plus à ce sujet dans notre introduction aux garnitures.
Ce projet suit les traces de bibliothèques comme les turbolinks et le stimulus. Il estime que le meilleur endroit pour votre entreprise et la logique de rendu est sur le serveur, que vous devriez envoyer à vos utilisateurs HTML, et que JavaScript est le mieux adapté à la manipulation DOM progressivement améliorée. Les garnitures sont un ensemble de modèles qui vous permettent d'ajouter une manipulation DOM à votre application en ajoutant des attributs data-trimmings-* à vos éléments interactifs. Moins de javascript dans votre projet signifie moins de risques.
Une fois que vous avez construit votre site Web et qu'il sert HTML qui est présenté comme vous l'aimez, vous pouvez commencer à ajouter des conseils de garnitures qui amélioreront la façon dont vos interactions se comportent.
Vous avez peut-être un lien vers une page de détail que vous souhaitez ouvrir dans un modal. La page autonome a probablement un en-tête et un pied de page que vous ne voudriez pas rendre dans votre modal. Ce n'est pas un problème. Ajoutez simplement un indice inline à votre lien:
<a data-trimmings-inline="from: .detail-container, to: .modal-container" href="/photos/2">
View as a modal
</a>
Si votre visiteur clique sur ce lien, la page sera récupérée en arrière-plan, l'élément avec la classe detail-container sera extrait du résultat, et il sera inséré dans un élément avec la classe de modal-container qui se trouve déjà sur la page. Vous pouvez écrire CSS qui fera que cela apparaîtra comme vous le souhaitez. Maintenant, vous avez un modal! C'est tout ce qu'il y a!
Incluez simplement trimmings.js dans votre <head> . C'est ça. Les garnitures s'activeront automatiquement lorsque votre page se chargera, pas besoin de penser aux cycles de vie.
<script src="/trimmings.js"></script>
Les fonctionnalités de réductions sont activées sur des éléments spécifiques en ajoutant des attributs data-trimmings-* . Pour plus de détails sur l'utilisation de chaque fonctionnalité de garnitures, veuillez consulter le manuel de tricts.
Sous licence sous l'un ou l'autre des
à votre option.
Si vous avez trouvé un bogue ou si vous souhaitez proposer une nouvelle fonctionnalité, soumettez un problème et parlons-en!
Nous nous attendons à ce que tous les contributeurs aux garnitures respectent notre code de conduite.
À moins que vous ne soyez explicitement indiqué autrement, toute contribution intentionnellement soumise pour inclusion dans les travaux par vous, telle que définie dans la licence Apache-2.0, doit être autorisée à double licence comme ci-dessus, sans aucune condition supplémentaire.
? Un projet de laboratoire de vos amis à Postlight. Codage heureux!