Uma dica de ferramenta é um recurso que oferece uma dica, mensagem descritiva ou informação sobre um elemento. Quando um usuário passa, focaliza ou clica no elemento, a dica de ferramenta aparece como um pequeno rótulo próximo ao elemento. As dicas de ferramentas são especialmente úteis para fornecer esclarecimentos, definições ou as próximas etapas para os usuários sem bagunçar sua IU.
Neste artigo, revisaremos as opções que estão disponíveis atualmente para a criação de dicas de ferramentas em aplicativos Vue. Em seguida, criaremos nosso próprio componente de dica de ferramenta do Vue do zero usando as informações fornecidas. Para nosso exemplo, usaremos as bibliotecas Vuetify e BootstrapVue .
Primeiros passos
Primeiro, certifique-se de ter o Vue CLI 4.X instalado em sua máquina. Para criar um novo projeto Vue, execute o seguinte comando em seu terminal:
vue create tooltips
Vamos excluir os componentes padrão em nosso novo projeto e ter certeza de que nada seja processado no navegador. Nosso arquivo App.vue deve ser semelhante ao bloco de código abaixo:
Crie uma dica de ferramenta no Vuetify
Para instalar o Vuetify, execute o seguinte comando no terminal:
vue add vuetify
Agora, o Vue CLI irá instalar o Vuetify para nós. Para criar uma dica de ferramenta, adicione o seguinte código a app.vue e exiba o projeto novamente:
Cada componente do Vuetify deve ser renderizado dentro do componente
No código acima, temos dois elementos principais, , que é renderizado como um texto simples, e . Quando passamos o mouse sobre o botão, o atributo v-slot ativa a dica de ferramenta e o conteúdo é exibido na tela:
Você também pode acionar o comportamento da dica de ferramenta dinamicamente com o seguinte código:
No bloco de código acima, criamos um novo botão e adicionamos um estado dentro do componente.
Inicialmente, a dica de ferramenta é definida como falsa. v-modal nos permite escolher se queremos exibir a dica de ferramenta ou não. O estado muda com o clique do botão, como pode ser visto na imagem abaixo:
Crie uma dica de ferramenta no BootstrapVue
Para instalar o BootstrapVue, execute o seguinte comando no terminal:
npm install vue bootstrap bootstrap-vue
Agora, devemos registrar BootstrapVue no ponto de entrada principal de nosso aplicativo. Navegue até main.js e adicione o código abaixo:
import Vue from”vue”; importar App de”./App.vue”; importar {BootstrapVue, IconsPlugin} de”bootstrap-vue”; import”bootstrap/dist/css/bootstrap.css”; import”bootstrap-vue/dist/bootstrap-vue.css”; importar vuetify de”./plugins/vuetify”; Vue.config.productionTip=false; Vue.use (BootstrapVue); Vue.use (IconsPlugin); new Vue ({vuetify, render: (h)=> h (App),}). $ mount (“# app”);
Temos dois métodos diferentes para criar dicas de ferramentas no BootstrapVue , a abordagem de componente e a abordagem de diretivas. Embora a abordagem de componente seja adequada para uso simples e padrão, a abordagem de diretivas oferece mais potencial para personalizar o comportamento da dica de ferramenta.
Lembre-se de que podemos acionar uma dica de ferramenta passando o mouse, focalizando ou clicando em um elemento.
Também temos 12 opções para posicionar nossa dica de ferramenta, com a parte superior sendo o padrão: superior, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop e leftbottom.
A abordagem do componente
No BootstrapVue, as dicas de ferramentas vêm como componentes que se anexam ao elemento de destino por meio do ID do componente. Para criar uma dica de ferramenta usando a abordagem de componente, podemos simplesmente criar um botão e colocar o ID no atributo de destino.
Adicione o seguinte código a App.vue:
No código acima, criamos um botão chamado b-button e demos a ele um ID específico, tooltip-target-1. Para acionar uma dica de ferramenta ao passar o mouse, podemos simplesmente usar o componente b-dica de ferramenta e colocar o ID do nosso botão no atributo de destino.
O atributo de gatilho é responsável pelo comportamento da dica de ferramenta. Por padrão, temos gatilhos para passar o mouse, focar, clicar e passar o mouse + foco. Podemos definir a posição da dica de ferramenta usando o posicionamento:
A abordagem das diretivas
A abordagem das diretivas nos permite usar diretivas personalizadas para especificar o comportamento de nossa dica de ferramenta componente. Para criar uma dica de ferramenta usando a abordagem de diretivas, basta usar a dica de ferramenta vb dentro do componente.
Por exemplo, podemos adicionar o bloco de código abaixo a App.vue:
Sirva o projeto e navegue até o navegador. Sua dica de ferramenta deve ser semelhante à imagem abaixo:
Podemos alterar o comportamento da dica de ferramenta nas ações do mouse usando diretivas. Vamos adicionar mais botões em App.vue:
Crie uma dica de ferramenta do zero
Com os métodos que revisamos até agora, temos que instalar pacotes externos para criar uma dica de ferramenta, resultando em tamanhos de dependência aumentados. Mudanças em nossas dependências podem fazer com que nosso aplicativo seja interrompido. No entanto, se estiver usando uma única dica de ferramenta, você pode criar uma do zero em apenas alguns minutos em vez de instalar uma biblioteca.
Na pasta do seu componente, crie um novo arquivo chamado Tooltip.vue e adicione o seguinte código:
No bloco de código acima, criamos o contêiner de dica de ferramenta principal, que abrigará todo o componente. A tag slot injeta o componente filho que habilitará a dica de ferramenta. Finalmente, um simples contém o texto para nossa dica de ferramenta:
Finalmente, vamos adicionar um prop para o nosso texto na forma de uma string:
A posição do contêiner principal é relativa. Para a dica de ferramenta, temos o z-index definido como 1, exibindo a dica de ferramenta acima do elemento.
Em seguida, renderizamos uma ponta de seta pequena e simples. Por padrão, a opacidade é definida como 0. Quando um usuário passa o mouse sobre um componente dentro de nosso componente de dica de ferramenta, a opacidade é definida como 1, exibindo nossa dica de ferramenta acima do elemento.
Para usar nossa dica de ferramenta personalizada, importe e registre a dica de ferramenta em App.vue:
Vamos servir nosso projeto e ver o resultado no navegador:
Conclusão
As dicas de ferramentas são uma adição útil e intuitiva para o seu aplicativo que melhora a sua experiência do usuário orientando os usuários e respondendo a perguntas com antecedência. Agora, você conhece algumas maneiras diferentes de criar uma dica de ferramenta no Vue, desde o uso de bibliotecas como BootstrapVue e Vuetify até começar do zero.
Usar uma biblioteca para criar uma dica de ferramenta é bastante fácil, no entanto, se você for preocupado com o tamanho de sua árvore de dependências, criar sua própria dica de ferramenta é tão simples quanto.
Embora nossos exemplos apresentem um componente de dica de ferramenta simples, você pode personalizar o seu com diferentes cores, ícones, movimentos e muito mais. Espero que tenha gostado deste tutorial!
