Android como NAV Tab en Vanilla JavaScript-simple-Tabs

Vista prévia

Descripción

Simple-Tabs es un plugin de JavaScript vainilla para crear un componente de pestañas de estilo Android para la navegación del encabezado.

También se puede utilizar para crear un carrusel de bucle infinito con flechas de navegación.

Funcionamiento

Inserte los archivos JavaScript y CSS necesarios en el archivo HTML.

<link rel="stylesheet" href="st.css">
<script src="st.js"></script>

La estructura HTML del componente Tabs.

<div class="simple-tabs" id="example">

<div class="headings">


<ul>



<li>Head 1</li>



<li>Head 2</li>



<li>Head 3</li>


</ul>


<div class="underline"></div>

</div>

<div class="content">


<div class="tabs">



<div class="tab">




Tab 1



</div>



<div class="tab">




Tab 2



</div>



<div class="tab">




Tab 3



</div>


</div>

</div>
</div>

Inicializa las pestañas simples y listo.

new ST(document.querySelector("#example"));

También puede Agregar flechas de navegación al componente de pestañas que actúa como un carrusel.

<div class="simple-tabs" id="example-2">

<div class="headings">


<ul>



<li>Head 1</li>



<li>Random heading</li>



<li>Lorem ipsum</li>


</ul>


<div class="underline"></div>

</div>

<div class="arrow l">


<img src="down.svg" class="fit" alt="\/" />

</div>

<div class="arrow r">


<img src="down.svg" class="fit" alt="\/" />

</div>

<div class="content">


<div class="tabs">



<div class="tab">




Head 1



</div>



<div class="tab">




Random heading



</div>



<div class="tab">




Lorem ipsum



</div>


</div>

</div>
</div>

new ST(document.querySelector("#example-2"), {


num: 2,


showArrows: true,


showMenu: false
});

Todas las opciones de configuración predeterminadas.

new ST(document.querySelector("#selector"), {



// CSS selectors


menu: main.querySelector(".headings ul"),


content: main.querySelector(".content"),


tabcontainer: main.querySelector(".tabs"),


menus: main.querySelectorAll(".headings ul li"),


tabs: main.querySelectorAll(".content .tab"),


la: main.querySelector(".arrow.l"),


ra: main.querySelector(".arrow.r"),


line: main.querySelector(".underline"),



// number of tabbed content to show at a time


num: 1,



// shows navigation arrows


showArrows: false,



// shows tab menu


showMenu: true,



// step size


step: 1,



// tab height


 tabHeight: 'auto'



});

Registro de cambios

11/06/2018

• Utilice la animación de aceleración