Componente minimalista ES6 Tabs-tabsjs

Vista prévia

Descripción

tabsjs es un componente minimalista de pestañas escrito en ES6. Este componente permite al usuario alternar entre el contenido con pestañas haciendo clic en las pestañas.

Funcionamiento

Cree las pestañas que siguen al HTML como estas:

<div data-tabs>


<div class="bar">



<div data-tabs-item="1" data-tabs-active>1</div>


<div data-tabs-item="2">2</div>


<div data-tabs-item="3">3</div>


</div>


<div class="content">



<div data-tabs-content="1" data-tabs-active>Tab 1</div>


<div data-tabs-content="2">Tab 2</div>


<div data-tabs-content="3">Tab 3</div>

</div>

</div>

Coloque el archivo principal de JavaScript ' tabs. js ' en la parte inferior de la Página Web.

<script src="tabs.js"></script>

Las reglas CSS requeridas.

[data-tabs] [data-tabs-content] {

display: none;
}

[data-tabs] [data-tabs-content][data-tabs-active] {

display: block;
}

Inicializar el componente de pestañas y listo.

Tabs.init()

Aplique sus propios estilos CSS a las pestañas.

[data-tabs] {

/* your css here */
}

[data-tabs] .bar {

/* your css here */
}

[data-tabs] [data-tabs-item] {

/* your css here */
}

[data-tabs] [data-tabs-content] {

/* your css here */
}

[data-tabs] [data-tabs-item][data-tabs-active] {

/* your css here */
}

[data-tabs] [data-tabs-item]:last-child {

/* your css here */
}

Registro de cambios

08/25/2018

• Agregar comentarios y constantes