Criando um componente de tabs com Vue 💚

Vamos aprender a criar esse componente de tabs usando Vue?

Isadora Stangarlin

0 min

264

Vamos aprender a criar esse componente de tabs usando Vue?

Para ver o código funcionando, clique aqui e para ver o código inteiro, clique aqui.

Vamos começar?

Eu criei o meu usando o CodesandBox, lá você pode criar um playground que roda Vue muito fácil.

Primeiros criamos dentro do <b>data</b> as variáveis que precisamos. A tabsList e o activeTab.

Primeiros criamos dentro do data as variáveis que precisamos. A tabsList e o activeTab.

Dentro do <b>created</b> definimos que a activeTab é a primeira da lista pra alguma já vir selecionada.

Dentro do created definimos que a activeTab é a primeira da lista pra alguma já vir selecionada.

No html vamos criar a lista das tabs. O parametro key é obrigatório, não esqueça!

Agora precisamos adicionar a classe active na tab que está ativa. ⬇️

Aqui estamos adicionando uma classe dinamicamente, se o método isActiveTab retornar true a classe <b>active</b> é adicionada.

Aqui estamos adicionando uma classe dinamicamente, se o método isActiveTab retornar true a classe active é adicionada.

Ao clicar em uma tab, precisamos setar ela como active, então vamos chamar o método <b>setActiveTab</b> passando o id da tab que foi clicada.

Ao clicar em uma tab, precisamos setar ela como active, então vamos chamar o método setActiveTab passando o id da tab que foi clicada.

Para que tudo isso funcione, vamos criar os métodos lá em methods ⬇️

Agora vamos estilizar essas tabs ⬇️

Se tudo deu certo, você já tem algo parecido com isso!

Agora só falta fazer a lógica para trocar o conteúdo de acordo com a tab selecionada 👇🏼

Após a lista <ul> vamos criar a div <b>text-container. </b>Dentro, vamos criar uma div pra cada conteúdo de acordo com a tab selecionada

Após a lista <ul> vamos criar a div text-container. Dentro, vamos criar uma div pra cada conteúdo de acordo com a tab selecionada

Estilize os conteúdos como preferir

Se você chegou até aqui, você tem algo parecido com isso ⬇️! Porém, sem animações perde todo o charme, né? Vamos colocar a cereja do bolo 🍒

Resultado sem animações de transição

Primeiro, vamos fazer a animação do active tab ⬇️

Adicionamos a animation no li.active e criamos o keyframe show. Isso vai fazer com que a linha que indica o selecionado apareça lentamente, começando sem cor, até ficar na cor que definimos. Isso dá um toque super legal.

E para animar o conteúdo? 😅

Você já ouviu falar que o Vue tem várias métodos prontos já para animação? Simmm, nos facilita a vida, é assim que vamos fazer!!

Adicione a tag <b>transition</b> com name e mode englobando as divs de conteúdo

Adicione a tag transition com name e mode englobando as divs de conteúdo

Como nós estamos usando v-if para mostrar o conteúdo, o mode out-in significa que o conteúdo primeiro vai desaparecer, pra depois entrar o próximo. Isso ajuda também no efeito de animação!

O slide-fade é a nossa animação personalizada, nesse caso, eu queria que ela entrasse na tela em uma animação "subindo", para fazer isso é muito simples:

Esses nomes vem tudo lá da documentação do Vue, o transition deixa que tu personalize a animação, mas temos que seguir esses nomes!

Tudo o que precisamos é adicionar o tempo de duração da animação e usando o transform nós indicamos a animação!

E o resultado final fica assim:

O diferencial está nos detalhes! 🌟

Espero que tenham gostado desse novo formato de conteúdo!

Learn

Support

More Options