Latte / Html
<nav class="tabs-nav js--tabs">
<div class="tabs-nav__content --content">
<div class="tabs-nav__nav --flex-inline">
<ul class="tabs-nav__tabs tabs">
<li class="tabs__item">
<span class="tabs__link tabs__link--active" data-href="#categories_product">
Testovací položka
</span>
</li>
<li class="tabs__item">
<span class="tabs__link" data-href="#blogs">
Testovací položka 2
</span>
</li>
</ul>
</div>
</div>
</nav>
Tabs-content
<div class="tabs-content">
<div class="tabs-content__block tabs-content__block--active" id="categories_product">
Test
</div>
<div class="tabs-content__block" id="blogs">
Test
</div>
</div>
CSS / SCSS
/* Tabs */
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs__item {
margin: 0 12px;
@include media($large){
margin: 0 20px;
}
}
.tabs__link {
font-size: 1.8rem;
padding: 15px 0;
display: block;
color: $color__text;
.tabs__item--selected & {
border-bottom: 2px solid $color__primary;
}
.tabs--big & {
font-weight: 700;
}
@include media($large){
padding: 35px 0;
}
}
.tabs__link--active{
font-weight: 700;
}
/* Tabs nav */
.tabs-nav{
background: $color__gray-light;
top: 0;
z-index: 900;
}
.tabs-nav__label {
font-size: 1.8rem;
padding: 10px 0;
display: flex;
font-weight: 700;
justify-content: space-between;
align-items: center;
cursor: pointer;
margin: 0 30px 0 0;
}
/* Tabs content */
.tabs-content__block{
display:none;
}
.tabs-content__block--active{
display: block;
}
.tabs-content__title{
margin-top: 30px;
margin-bottom: 20px;
}
Javascript - přepínání tab-content
Je potřeba přidat do webpack.mix.js soubor custom_tabs.js