Pestañas
Las pestañas son un elemento de navegación para mostrar contenido diferente con el mismo contexto.
- Pestaña 1
- Otra Pestaña
- Tercera
- Última pestaña
Pestaña 1
Esto es un subtítulo
En esta pestaña describimos un primer elemento que puede tener subtítulos
Otra Pestaña
Esto es un subtítulo
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.
Tercera
Esta pestaña no empieza por un subtítulo, pero podría contener imágenes
Última pestaña
Dentro de una pestaña puede haber varios párrafos
Párrafo 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Párrafo 2
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- HTML
- JS
<ul class="ulpgcds-tabs">
<li class="active" href="#tab-1">Item 1</li>
<li href="#tab-2">Item 2</li>
<li href="#tab-3">Item 3</li>
<li href="#tab-4">Item 4</li>
</ul>
<div class="ulpgcds-tab-content active" id="tab-1">
<h3>Item 1</h3>
<p>Contenido</p>
</div>
<div class="ulpgcds-tab-content" id="tab-2">
<h3>Item 2</h3>
<p>Contenido</p>
</div>
<div class="ulpgcds-tab-content" id="tab-3">
<h3>Item 3</h3>
<p>Contenido</p>
</div>
<div class="ulpgcds-tab-content" id="tab-4">
<h3>Item 4</h3>
<p>Contenido</p>
</div>
$('.ulpgcds-tabs li').click(function(){
var tab_id = $(this).attr('href');
$(this).parent().find("li").removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
if ($(tab_id))
$(tab_id).addClass('active');
}); Variantes
- Item 1
- Item 2
- Item 3
- Item 4
Item 1
Contenido
Item 2
Contenido
Item 3
Contenido
Item 4
Contenido
- HTML
- JS
<ul class="ulpgcds-tabs">
<li class="active" href="#tab-2-1"><span class="icon icon-user"></span>Item 1</li>
<li href="#tab-2-2"><span class="icon icon-campus"></span>Item 2</li>
<li href="#tab-2-3"><span class="icon icon-ulpgc"></span>Item 3</li>
<li href="#tab-2-4"><span class="icon icon-file"></span>Item 4</li>
</ul>
<div class="ulpgcds-tab-content active" id="tab-2-1">
<h3>Item 1</h3>
<p>Contenido</p>
</div>
<div class="ulpgcds-tab-content" id="tab-2-2">
<h3>Item 2</h3>
<p>Contenido</p>
</div>
<div class="ulpgcds-tab-content" id="tab-2-3">
<h3>Item 3</h3>
<p>Contenido</p>
</div>
<div class="ulpgcds-tab-content" id="tab-2-4">
<h3>Item 4</h3>
<p>Contenido</p>
</div> $('.ulpgcds-tabs li').click(function(){
var tab_id = $(this).attr('href');
$(this).parent().find("li").removeClass('active');
$('.tab-content').removeClass('active');
$(this).addClass('active');
if ($(tab_id))
$(tab_id).addClass('active');
}); Uso del componente
Las pestañas permiten acceder rápidamente a diferentes vistas de contenido con importancia similar. Es importante agrupar el contenido de manera que el título de su pestaña sea intuitivo y el usuario pueda predecir lo que va a encontrar bajo esa pestaña.
Buenas prácticas:
- Nunca anide pestañas entre sí.
- Si va a emplear un icono, intente que tenga relación con el contenido que contiene. Si alguna pestaña no tiene asignado un icono, es preferible no ponerlo en ninguna de las pestañas.
- Ordene las pestañas por un orden lógico para el usuario.
- Intente no emplear nunca más de seis pestañas. Esto asegura una correcta visualización de las pestañas. Si necesita más de seis pestañas, considere emplear otro componente como los acordeones.
- Nunca puede haber más de una pestaña activa al mismo tiempo.
- La primera pestaña debe estar activa por defecto.
Estilos CSS
Estas son las clases aplicadas a las etiquetas HTML para conseguir los diferentes estilos.
| Selector CSS | Descripción |
|---|---|
| .ulpgcds-tabs | Activa los estilos y funcionalidad de las pestañas |
| .ulpgcds-tabs-content | Aplica los estilos del contenido de la pestaña |
Diseño
En esta sección se pueden ver los aspectos que presenta el componente para las diferentes pseudoclases relativas a la interacción con el mismo. Estos estilos siguen los mismos patrones de interacción que el resto de los componentes del Design System, por lo que su modificación puede afectar a la consistencia del sistema y a la experiencia de los usuarios.
