Pestañas para agrupar bloques de contenido.
Las pestañas se agrupan con la clase .tab-system y el atributo data-tab-system. Al conjunto de pestañas (estructura ul) se les asigna la clase .nav-tabs--basic, y cada pestaña recibe la clase .tab y el atributo data-tab-trigger. Cada pestaña es un enlace que apunta al id de su correspondiente bloque, y cada uno de los bloques tiene la clase .tab-content y el atributo data-tab-content.
La pestaña activa y su bloque correspondiente se señalan con la clase .is-active.
Cuando las pestañas no tienen espacio suficiente para mostrarse (normalmente, en pantallas pequeñas), muestran un scroll horizontal. Si el JavaScript falla por la razón que sea, las pestañas siguen siendo interaccionables gracias al selector :target.
Contenido pestaña 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div data-tab-system="" class="tab-system">
<ul role="tablist" class="nav-tabs nav-tabs--basic">
<li role="presentation" class="col-md-3">
<a href="#tab-content-4" id="tab-4" role="tab" aria-controls="tab-content-4" aria-selected="true" data-tab-trigger="" class="tab is-active">
<h4>Pestaña 1</h4>
</a>
</li>
<li role="presentation" class="col-md-3">
<a href="#tab-content-5" id="tab-5" role="tab" aria-controls="tab-content-5" aria-selected="false" aria-controls="tab-content-5" data-tab-trigger="" class="tab">
<h4>Pestaña 2</h4>
</a>
</li>
<li role="presentation" class="col-md-3">
<a href="#tab-content-6" id="tab-6" role="tab" aria-controls="tab-content-6" aria-selected="false" aria-controls="tab-content-6" data-tab-trigger="" class="tab">
<h4>Pestaña 3</h4>
</a>
</li>
</ul>
<div id="tab-content-4" data-tab-content="" role="tabpanel" aria-labelledby="tab-4" aria-hidden="false" class="tab-content is-active">
<div class="col-xs-12">
<p>Contenido pestaña 1</p>
</div>
</div>
<div id="tab-content-5" data-tab-content="" role="tabpanel" aria-labelledby="tab-5" aria-hidden="true" class="tab-content">
<div class="col-xs-12">
<p>Contenido pestaña 2</p>
</div>
</div>
<div id="tab-content-6" data-tab-content="" role="tabpanel" aria-labelledby="tab-6" aria-hidden="true" class="tab-content">
<div class="col-xs-12">
<p>Contenido pestaña 3</p>
</div>
</div>
</div>
Si el contenido solo debe actuar como pestaña en dispositivos móviles, se ha de añadir la clase .tab-content--mobile-only a los elementos .tab-content, se deben ocultar las pestañas añadiendo la clase .visible-xs en el .nav-tabs y para mantener visible el título de cada bloque se debe trasladar al contenido de la pestaña y ocultar con las clase .hidden-xs.
Contenido pestaña 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div data-tab-system="" class="tab-system">
<ul role="tablist" class="nav-tabs nav-tabs--basic visible-xs">
<li role="presentation" class="col-md-3"><a href="#tab-content-7" id="tab-7" role="tab" aria-controls="tab-content-7" aria-selected="true" data-tab-trigger="" class="tab is-active">
<h4>Pestaña 1</h4></a></li>
<li role="presentation" class="col-md-3"><a href="#tab-content-8" id="tab-8" role="tab" aria-controls="tab-content-8" aria-selected="false" data-tab-trigger="" class="tab">
<h4>Pestaña 2</h4></a></li>
<li role="presentation" class="col-md-3"><a href="#tab-content-9" id="tab-9" role="tab" aria-controls="tab-content-9" aria-selected="false" data-tab-trigger="" class="tab">
<h4>Pestaña 3</h4></a></li>
</ul>
<div id="tab-content-7" data-tab-content="" role="tabpanel" aria-labelledby="tab-7" aria-hidden="false" class="tab-content tab-content--mobile-only is-active">
<div class="col-xs-12">
<h4 class="hidden-xs">Pestaña 1</h4>
<p>Contenido pestaña 1</p>
<p>....</p>
</div>
</div>
<div id="tab-content-8" data-tab-content="" role="tabpanel" aria-labelledby="tab-8" aria-hidden="true" class="tab-content tab-content--mobile-only">
<div class="col-xs-12">
<h4 class="hidden-xs">Pestaña 2</h4>
<p>Contenido pestaña 2</p>
<p>....</p>
</div>
</div>
<div id="tab-content-9" data-tab-content="" role="tabpanel" aria-labelledby="tab-9" aria-hidden="true" class="tab-content tab-content--mobile-only">
<div class="col-xs-12">
<h4 class="hidden-xs">Pestaña 3</h4>
<p>Contenido pestaña 3</p>
<p>....</p>
</div>
</div>
</div>
Por defecto las pestañas básicas usan scroll para su correcta visualización en horizontal. Si por el contrario
necesitamos mostrar las pestañas en vertical debemos hacer uso de las clases de la retícula (Ej: col-xs-12 col-md-3)
y debemos utilizar la clase.nav-tabs--alternative en lugar de.nav-tabs--basic
Contenido pestaña 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<div data-tab-system="" class="tab-system">
<ul role="tablist" class="nav-tabs nav-tabs--alternative">
<li role="presentation" class="col-xs-12 col-md-3">
<a id="tab-10" href="#tab-content-10" role="tab" aria-controls="tab-content-10" aria-selected="true" data-tab-trigger="" class="tab is-active">
<h4 class="m-bottom-0y">Pestaña 1</h4></a></li>
<li role="presentation" class="col-xs-12 col-md-3">
<a id="tab-11" href="#tab-content-11" role="tab" aria-controls="tab-content-11" aria-selected="false" data-tab-trigger="" class="tab">
<h4 class="m-bottom-0y">Pestaña 2</h4></a></li>
<li role="presentation" class="col-xs-12 col-md-3">
<a id="tab-12" href="#tab-content-12" role="tab" aria-controls="tab-content-12" aria-selected="false" data-tab-trigger="" class="tab">
<h4 class="m-bottom-0y">Pestaña 3</h4></a></li>
</ul>
<div id="tab-content-10" data-tab-content="" role="tabpanel" aria-labelledby="tab-10" aria-hidden="false" class="tab-content is-active">
<div class="col-xs-12">
<p>Contenido pestaña 1</p>
<p>
...
</p>
</div>
</div>
<div id="tab-content-11" data-tab-content="" role="tabpanel" aria-labelledby="tab-11" aria-hidden="true" class="tab-content">
<div class="col-xs-12">
<p>Contenido pestaña 2</p>
<p>
...
</p>
</div>
</div>
<div id="tab-content-12" data-tab-content="" role="tabpanel" aria-labelledby="tab-12" aria-hidden="true" class="tab-content">
<div class="col-xs-12">
<p>Contenido pestaña 3</p>
<p>
...
</p>
</div>
</div>
</div>