Produto
PRODUTO
Tab-bar
As tabs são usadas para navegar rapidamente entre diferentes sub-sessões dentro de uma determinada área.
Anatomia
Estados de interação
Os estados de interação indicados abaixo se replicam para todas as suas variações de tipo.
Inativo
Hover
Ativo
Inativo - Sem ícone
Hover - Sem ícone
Ativo - Sem ícone
Mobile
Código
HTML 
Exibir código
Copiar código
Exibir código
<div class="tab-bar">
<button class="tab-link">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M6 10V7a6 6 0 1 1 12 0v3h1a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3h1zm2 0h8V7a4 4 0 1 0-8 0v3zm-3 2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H5z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b" fill="#fff">
<use xlink:href="#a"></use>
</mask>
<use id="icon-mask" fill="#9b9b9b" fill-rule="nonzero" xlink:href="#a"></use>
<g id="icon" fill="#9b9b9b" mask="url(#b)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Título 1
</button>
<button class="tab-link active">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a2" d="M21 21a1 1 0 0 1-2 0v-2a3 3 0 0 0-3-3H8a3 3 0 0 0-3 3v2a1 1 0 0 1-2 0v-2a5 5 0 0 1 5-5h8a5 5 0 0 1 5 5v2zm-9-9a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<mask id="b2" fill="#fff">
<use xlink:href="#a2"></use>
</mask>
<use id="icon-mask" fill="#9B9B9B" fill-rule="nonzero" xlink:href="#a2"></use>
<path d="M0 0h24v24H0z" mask="url(#b2)"></path>
<g id="icon" fill="#9B9B9B" mask="url(#b2)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Título 2
</button>
<button class="tab-link">
<i class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a3" d="M5 5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H5zm0-2h14a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm10-1a1 1 0 0 1 2 0v4a1 1 0 0 1-2 0V2zM7 2a1 1 0 1 1 2 0v4a1 1 0 1 1-2 0V2zm-4 9a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2H3z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b3" fill="#fff">
<use xlink:href="#a3"></use>
</mask>
<use id="icon-mask" fill="#9b9b9b" fill-rule="nonzero" xlink:href="#a3"></use>
<g id="icon" fill="#9b9b9b" mask="url(#b3)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</i>
Título 3
</button>
</div>
SASS Exibir código
Copiar código
Exibir código
.tab-bar{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
padding-left: 0;
margin-bottom: 0;
@media (max-width: $MQMobile){
position: relative;
clear: both;
margin: 0;
padding-top: 15px;
width: 300px;
height: 105px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
display: block;
}
button{
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
box-sizing: border-box;
text-align: left;
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
font-family: Lato;
font-size: 1em;
line-height: 1.5;
letter-spacing: normal;
color: #9b9b9b;
border-bottom: 1px solid #9b9b9b;
padding: 15px 10px;
@media (max-width: $MQMobile){
padding-right: 30px;
}
transition: color .4s;
i.icon{
display: block;
margin-bottom: 10px;
height: 24px;
width: 24px;
#icon, #icon-mask{
transition: .4s;
}
}
&.hovered,
&:hover{
border-radius: 2px;
color: #1b68ff;
i.icon{
#icon, #icon-mask{
fill: #1b68ff;
}
}
}
&.disabled{
color: #9b9b9b!important;
i.icon{
#icon, #icon-mask{
fill: #9b9b9b!important;
}
}
}
&.active{
&:before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
border-radius: 2px 2px 0 0;
background-color: #3153f5;
transition: .4s;
}
color: #3153f5;
border-bottom: 1px solid #3153f5;
font-weight: bold;
i.icon{
#icon, #icon-mask{
fill: #3153f5;
}
}
}
}
}
.tab-bar-example{
box-sizing: border-box;
border-radius: 4px;
background-color: #f9f9f9;
border: solid 1px #ebebeb;
padding: 40px 7em;
@media(max-width: $MQMobile){
padding: 20px;
}
margin-bottom: 30px;
}
JS Exibir código
Copiar código
Exibir código
$('body').on('click', '.tab-bar button:not(.disabled)', function(e){
$(this).closest('.tab-bar').find('button').removeClass('active');
$(this).addClass('active');
});