Material fichas de estilo componente con JavaScript y CSS

Vista prévia

Descripción

Un bonito componente de pestañas de estilo de diseño de materiales construido usando transiciones de JavaScript, CSS y CSS3 & transforma.

Funcionamiento

Compile el contenido con pestañas y la navegación de la siguiente manera.

<div class="material-tabs">

<div class="tabbed-section__selector">


<a class="tabbed-section__selector-tab-1 active" href="#">Tab 1</a>


<a class="tabbed-section__selector-tab-2" href="#">Tab 2</a>


<a class="tabbed-section__selector-tab-3" href="#">Tab 3</a>


<span class="tabbed-section__highlighter"></span>

</div>



<div class="tabbed-section-1 visible">


Section 1

</div>

<div class="tabbed-section-2 hidden">


Section 2

</div>

<div class="tabbed-section-3 hidden">


Section 3

</div>
</div>

Los estilos principales de CSS/CSS3.

.material-tabs {

display: block;

float: left;

padding: 16px;

padding-top: 0;

width: 100%;

max-width: 480px;

left: calc(50% - 480px/2);

position: relative;

margin: 96px auto;

background: #fff;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23) !important;

border-radius: 2px;
}
@media all and (max-width: 480px) {

.material-tabs {

max-width: 100%;

left: 0;
}
}

.visible {

position: relative;

opacity: 1;

width: 100%;

height: auto;

float: left;

-webkit-transition: opacity .35s ease;

transition: opacity .35s ease;

z-index: 3;
}

.hidden {

position: absolute;

opacity: 0;

z-index: 0;

-webkit-transition: opacity 0s ease;

transition: opacity 0s ease;
}

.tabbed-section__selector {

position: relative;

height: 32px;

top: -31.2px;

left: -16px;

padding: 0;

margin: 0;

width: 100%;

float: left;
}

.tabbed-section__selector [class*="-tab-"] {

float: left;

display: block;

height: 32px;

line-height: 32px;

width: 100px;

text-align: center;

background: #fff;

font-weight: bold;

text-decoration: none;

color: black;

font-size: 14px;
}

.tabbed-section__selector [class*="-tab-"].active { color: #4F2CCA; }

.tabbed-section__selector a:first-child { border-top-left-radius: 2px; }

.tabbed-section__selector a:last-of-type { border-top-right-radius: 2px; }

.tabbed-section__highlighter {

position: absolute;

z-index: 10;

bottom: 0;

height: 2px;

background: #4F2CCA;

max-width: 100px;

width: 100%;

-webkit-transform: translateX(0);

-ms-transform: translateX(0);

transform: translateX(0);

display: block;

left: 0;

-webkit-transition: -webkit-transform 0.23s ease;

transition: transform 0.23s ease;
}

.tabbed-section__selector-tab-3.active ~ .tabbed-section__highlighter {

-webkit-transform: translateX(200px);

-ms-transform: translateX(200px);

transform: translateX(200px);
}

.tabbed-section__selector-tab-2.active ~ .tabbed-section__highlighter {

-webkit-transform: translateX(100px);

-ms-transform: translateX(100px);

transform: translateX(100px);
}

.tabbed-section__selector-tab-1.active ~ .tabbed-section__highlighter {

-webkit-transform: translateX(0);

-ms-transform: translateX(0);

transform: translateX(0);
}

.divider {

background: rgba(0, 0, 0, 0.1);

position: relative;

display: block;

float: left;

width: 100%;

height: 1px;

margin: 8px 0;

padding: 0;

overflow: hidden;
}

El JavaScript.

var $ = function (selector) {

return document.querySelectorAll(selector);
};


var tabs = [

'.tabbed-section__selector-tab-1',

'.tabbed-section__selector-tab-2',

'.tabbed-section__selector-tab-3'
];

var toggleTab = function(element) {

var parent = element.parentNode;



$(element)[0].addEventListener('click', function(){


this.parentNode.childNodes[1].classList.remove('active');


this.parentNode.childNodes[3].classList.remove('active');


this.parentNode.childNodes[5].classList.remove('active');



this.classList.add('active');





if(this.classList.contains('tabbed-section__selector-tab-1')) {



// and change the classes, show the first content panel



$('.tabbed-section-1')[0].classList.remove('hidden');



$('.tabbed-section-1')[0].classList.add('visible');







$('.tabbed-section-2')[0].classList.remove('visible');



$('.tabbed-section-2')[0].classList.add('hidden');



 $('.tabbed-section-3')[0].classList.remove('visible');



$('.tabbed-section-3')[0].classList.add('hidden');


}



if(this.classList.contains('tabbed-section__selector-tab-2')) {



$('.tabbed-section-2')[0].classList.remove('hidden');



$('.tabbed-section-2')[0].classList.add('visible');



$('.tabbed-section-1')[0].classList.remove('visible');



$('.tabbed-section-1')[0].classList.add('hidden');



$('.tabbed-section-3')[0].classList.remove('visible');



$('.tabbed-section-3')[0].classList.add('hidden');


}





if(this.classList.contains('tabbed-section__selector-tab-3')) {



$('.tabbed-section-3')[0].classList.remove('hidden');



$('.tabbed-section-3')[0].classList.add('visible');



$('.tabbed-section-1')[0].classList.remove('visible');



$('.tabbed-section-1')[0].classList.add('hidden');



$('.tabbed-section-2')[0].classList.remove('visible');



$('.tabbed-section-2')[0].classList.add('hidden');


}

});
};

for (var i = tabs.length - 1; i >= 0; i--) {

toggleTab(tabs[i])
};