Como criar um componente capaz de gerenciar abas
Neste artigo veremos como criar um componente no qual irá renderizar abas, que opdem conter os mais diversos conteúdos. O objetivo final é criar um componente que possui este comportamento:
Primeiro temos que estabelecer qual framework CSS usaremos. A partir dele podemos criar algumas regras para então poder criar o componente. Neste artigo usaremos o Bootstrap, que possui como base este código html:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Some content.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Some content in menu 1.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Some content in menu 2.</p>
</div>
</div>
Este código html pode ser testando neste link.
Analisando a forma como o Bootstrap cria as abas, perceba que temos inicialmente a tag <ul> e <li> que representa as abas, e a tag <div class="tab-content"> que representa o conteúdo de cada aba. O próprio Bootstrap irá se encarregar de alterar o conteúdo de acordo com a aba qye será clicada.
O nosso objetivo então se “resume” a criar componentes em Vue que simulem a estrutura html acima.
Primeiro, crie o projeto usando vue-cli:
vue init browserify-simple mytabs
cd mytabs
npm install
Após criar o projeto, vamos adicionar o jQuery+Botostrap da forma mais rápida e simples, pelo CDN, editando o arquivo index.html, veja:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>vue-tabs</title>
<!-- bootstrap cdn-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<app></app>
<!-- bootstrap cdn-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- App build -->
<script src="dist/build.js"></script>
</body>
</html>
Agora temos que descrever como seria o nosso componente! A princípio, algo como o código a seguir seria viável:
<tabs>
<tab name="t1" title="Tab 1" active=true>
Hello World
</tab>
<tab name="t2" title="Tab 2">
Hello World 2
</tab>
<tab name="t3" title="Tab 3">
Hello World 3
</tab>
</tabs>
Ou seja, temos um componente chamado Tabs e outro chamado Tab (No html é sempre em minúsculo). O componente Tab é mais simpels, pois ele possui o texto de conteúdo e três propriedades. Vamos criá-lo primeiro? Então crie o diretório “components” e o arquivo “Tab.vue”:
<template>
<div role="tabpanel" class="tab-pane" :class="{'active': active}" id="">
<slot></slot>
</div>
</template>
<script>
export default{
props: {
title:{type:String,required: true},
active:{type:[Boolean,String],default:false},
name:{type:String,required: true}
}
}
</script>
Veja que, no template, criamos a div que possui o mesmo conteúdo html que da aba do Bootstrap necessita, ou seja, os parâmetros role, class e id devem estar presentes. As propriedades do componente são o título, se a aba está ativa ou não, e o nome da aba, que é necessário para que o Bootstrap possa trocar o conteúdo de cada aba ao ser clicada.
O componente Tabs é um pouco mais complexo, pois ele deve simular uma situação mais difícil. Primeiro, ele deve renderizar a lista de <ul>..<li>..</li>..</ul> que formam as abas. Depois, eles devem renderizar cada div que é o conteúdo de cada aba.
Crie o componente components/Tabs.vue, com o seguinte código:
<template>
<ul class="nav nav-tabs">
<li role="presentation" :class="{'active':tab.active}" v-for="tab in tablist" ><a href="#" aria-controls="" role="tab" data-toggle="tab"></a></li>
</ul>
<div class="tab-content">
<slot></slot>
</div>
</template>
<script>
export default{
data () {
return {
tablist: []
}
},
ready(){
//console.log(this.$children);
this.$children.forEach(c=>{
this.tablist.push({
"name": c.name,
"title": c.title,
"active": c.active
});
})
}
}
</script>
<style>
.nav-tabs {
background-color: #eeeeee;
padding-top:5px;
padding-left:5px;
border: 1px solid #ddd;
}
.tab-content {
color : #000000;
background-color: #ffffff;
padding : 5px 15px;
margin-top: -1px;
border: 1px solid #ddd;
}
</style>
No <template> criamos a <ul> que irá renderizar quantos <li> forem necessários. A quantidade está ligada a um array chamado tablist. Este array será criado no método ready do componente. Criamos o ul...li de acordo com o exemplo do Bootstrap, incluindo o elemento <a> que irá apontar para uma aba específica.
Depois de criar o <ul>, criamos <div> que conterá o conteúdo de cada aba, e nesse momento usamos o <slot> para que os componentes <tab> sejam inseridos neste slot.
O maior detalhe deste componente é como deveremos preencher o array tablist com as abas a serem criadas. Fazemos isso com o uso da propriedade this.$children, nativa do Vue, que retorna um conjunto de elementos que estão presentes no <slot></slot> do componente.
Utilizando this.$children podemos saber quantos filhos o componente Tags possui, e quais suas propriedades. Dessa forma, podemos montar a lista de <li> preenchendo o array tablist:
this.$children.forEach(c=>{
this.tablist.push({
"name": c.name,
"title": c.title,
"active": c.active
});
})
Na parte final do componente, temos o style, que dá uma graça no mesmo…
Com isso nós conseguimos fazer um componente de abas bem simples, onde é possível adicionar conteúdo em cada aba, de forma organizada, por exemplo:
<template>
<div id="app" class="container">
<h1> Tabs </h1>
<tabs>
<tab name="t1" title="Tab 1" active=true>
Hello World
</tab>
<tab name="t2" title="Tab 2">
Hello World 2
</tab>
<tab name="t3" title="Tab 3">
Hello World 3
</tab>
</tabs>
</div>
</template>
<script>
import Tabs from './components/Tabs.vue'
import Tab from './components/Tab.vue'
export default {
components: {
Tabs,Tab
}
}
</script>
Para adicionar mais elementos, ou elementos mais complexos, dêuma olhada no exemplo que está no github.