Zurb, les créateurs de Foundation, ont la réputation de créer des outils robustes que les développeurs Web adorent. Ils élaborent des solutions efficaces car ils commencent à résoudre les problèmes qu’ils rencontrent eux-mêmes.
engine called Maintenant, ils sont de retour avec un nouveau moteur JavaScript @mention ES6 open source appelé Tribute.js .
is a user interface technique for addressing someone directly. @mention est une technique d'interface utilisateur permettant de s'adresser directement à quelqu'un. someone, they are tagged into a conversation. Lorsque vous parlez à quelqu'un, ils sont associés à une conversation. was first popularized by social media sites like Twitter, but you'll find it making its way into all manner of applications thanks to adoption by startups like Slack. Le @mention a été popularisé pour la première fois par des sites de médias sociaux tels que Twitter, mais vous le trouverez dans toutes les applications grâce à l’adoption de startups telles que Slack.
En 2014, Zurb a commencé à fusionner plusieurs de ses applications de conception en une nouvelle plate-forme unique appelée Notable . system, but failing to find a reliable 3rd party option, they decided to build their own. Ils avaient besoin d'un système @mention , mais à défaut de trouver une option tierce fiable, ils ont décidé de construire leur propre système. Le résultat est Tribute.js.
Tribute.js est une solution JavaScript native, ce qui signifie qu’elle évite de s’appuyer sur des plugins ou des scripts tiers. En évitant les bibliothèques telles que jQuery, Angular, etc., Zurb réduit les risques de conflits entre Tribute.js et les scripts exécutés en même temps que lui. ce qui fait de Tribute.js un outil hautement utilisable pouvant être implémenté de manière cohérente dans une multitude d’applications différentes, indépendamment des autres dépendances que vous pouvez choisir d’utiliser.
Tribute.js est vraiment simple à implémenter. Tout d'abord, importez CSS et JS de Tribute.js:
: Ensuite, vous avez besoin d'un élément dans votre balisage pour afficher un @mention :
Enfin, initialisez Tribute avec un tableau d'objets représentant vos utilisateurs, puis attachez Tribute à l'élément de la page:
Lorsqu'un utilisateur tape un symbole @, une liste de noms d'utilisateurs basée sur la propriété key lui est présentée. Lorsqu'il en sélectionne un, la propriété value correspondante est insérée.
Vous pouvez télécharger Tribute gratuitement à partir de Github, ou installez via npm, et vous trouverez une liste complète des options dans la documentation.