A Zurb, criadora da Foundation, tem a reputação de construir ferramentas robustas que os desenvolvedores da web adoram. Eles criam soluções eficazes porque começam a resolver os problemas que encontram.
engine called Agora eles estão de volta com um novo mecanismo de código aberto ES6 JavaScript @mention chamado Tribute.js .
is a user interface technique for addressing someone directly. @mention é uma técnica de interface de usuário para endereçar diretamente a alguém. someone, they are tagged into a conversation. Quando você @mention alguém, eles são marcados em uma conversa. 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. O @mention foi popularizado pela primeira vez por sites de mídia social como o Twitter, mas você vai encontrá-lo em todos os tipos de aplicativos graças à adoção de startups como o Slack.
Em 2014, a Zurb começou a fundir vários de seus aplicativos de design em uma única nova plataforma chamada Notável . system, but failing to find a reliable 3rd party option, they decided to build their own. Eles precisavam de um sistema @mention , mas, ao não encontrar uma opção confiável de terceiros, decidiram construir o seu próprio. O resultado é Tribute.js.
O Tribute.js é uma solução nativa de JavaScript, o que significa que evita depender de plugins ou scripts de terceiros. Ao evitar bibliotecas como jQuery, Angular e assim por diante, a Zurb diminuiu as chances de conflitos surgindo entre o Tribute.js e os scripts que são executados em conjunto com ele; O que torna o Tribute.js uma ferramenta altamente utilizável que pode ser implementada de forma consistente em vários aplicativos diferentes, independentemente das outras dependências que você pode optar por usar.
O Tribute.js é muito simples de implementar. Primeiro, importe CSS e JS do Tribute.js:
: Em seguida, você precisa de um elemento na sua marcação que exiba uma @mention :
Por fim, inicialize o Tribute com uma matriz de objetos que representam seus usuários e, em seguida, anexe o Tribute ao elemento da página:
Quando um usuário digita um símbolo @, eles serão apresentados a uma lista de nomes de usuários com base na propriedade key , quando eles selecionam um, a propriedade de valor correspondente será inserida.
Você pode baixar Tributo gratuitamente do Github, ou instale via npm, e você encontrará uma lista completa de opções na documentação.