/
para buscarGeneral
Base
Los tabs organizan el contenido en diferentes pantallas y vistas. Actualmente, este componente se basa en la estructura de Bootstrap, pero nosotros añadimos una capa adicional para personalizar su estilo. Utilizamos este componente para crear una subnavegación dentro de una misma página sin interrumpir el flujo del usuario.
<div class="eb-nav-tab nav nav-tabs">
<li class="nav-item">
<a href="#targetA" class="nav-link active" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a href="#targetB" class="nav-link" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a href="#targetC" class="nav-link" data-toggle="tab">Tab</a>
</li>
</div>
<div class="tab-content">
<div class='tab-pane active' id='targetA'></div>
<div class='tab-pane' id='targetB'></div>
<div class='tab-pane' id='targetC'></div>
</div>
El href del botón debe el mismo valor del id de tab-pane.
Nota Puedes ver el comportamiento del JavaScript aquí.
Stretch
Para que los items dentro del componente distribuyan su ancho en proporciones iguales, debemos agregar --stretch y --center como clase modificadora. Generalmente, utilizamos esta versión cuando el Tab se encuentra dentro de un componente más pequeño, permitiendo así distribuir el peso visual de manera equitativa.
<div class="eb-nav-tab nav nav-tabs --stretch --center">
<li class="nav-item">
<a href="#targetA" class="nav-link active" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a href="#targetB" class="nav-link" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a href="#targetC" class="nav-link" data-toggle="tab">Tab</a>
</li>
</div>
<div class="tab-content">
<div class='tab-pane active' id='targetA'></div>
<div class='tab-pane' id='targetB'></div>
<div class='tab-pane' id='targetC'></div>
</div>
Borderless
Utilizamos --borderless cuando necesitamos que el componente no tenga bordes. Generalmente, se emplea cuando es parte de un elemento flotante separado de los paneles.
<div class="eb-nav-tab px:066 pt:025 nav nav-tabs --borderless">
<li class="nav-item">
<a href="#targetA" class="nav-link active" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a href="#targetB" class="nav-link" data-toggle="tab">Tab</a>
</li>
<li class="nav-item">
<a href="#targetC" class="nav-link" data-toggle="tab">Tab</a>
</li>
</div>