La Anatomia de Tabs

La Anatomía de Tabs

¡Vamos!

Segun Material Design

¡Vamos!

¿Qué son las Tabs o pestañas?

Es un componente de la interfaz de los usuarios (UI) utilizado para organizar y mostrar contenido en diferentes categorías o secciones. Las tabs son especialmente útiles cuando hay varias secciones de contenido relacionado que pueden ser exploradas individualmente.

Playlist

Artists

Music

Playlist

Music

Secundaria

Podcast

Artists

La navegación se da en horizontal pero el desplazamiento dependerá del diseño

Favoritos

Cada tab representa una sección diferente y al seleccionar una tab, se muestra el contenido correspondiente.

Se puede usar cuando queremos agrupar contenido relacionado

Music

Comunity

Primaria

Plans

Home

¿Cómo funcionan?

Debemos saber que hay Tabs primarias y secundarías.

• Visualización de las tabs
• Cambio entre tabs
• Indicador de tab activa
• Contenido dinámico
• Gestión de overflow
• Compatibilidad con interacciones táctiles

Home

Home

Download

Desplazable

Home

Estático

Home

Home

Music

Artists

Playlist

Podcast

Favoritos

Playlist

Artists

Music

Comunity

Plans

Home

¿Qué características deben tener?

Elementos & Tipos de Tabs

Elementos

Music

El diseño es claro y sencillo, debe tener:

• Envase o contenedor tiene varias pestañas. Su contenido puede ser fijo o desplazable.
• Icono (opcional)
• Etiqueta
• Indicador Activo
• Divisor

Activado

Enfocado

Desactivado

Home

Home

Se trata de cuando oprimes la opción pero no la aprietas del todo, por lo que se colorea levemente.

Home

Arquitectura

+ info

Activado: En el envase Altura (solo con el texto de la etiqueta) - 48dp Altura (con icono y texto de etiqueta) 64dp Icono tamaño Máx de 24dp Etiqueta (No sugiere tamaño) Divisor: Máximo tamaño 1dp Enfocado: Color primario enseñando la activación, quiere decir que en ese estado el envase en ese parte tiene el color primario con la opacidad activada o un color secundario (Mayormente gris) Desactivado: Estado inactivo, sin divisor y con color de inactividad toda la sección.

Usos correctos e incorrectos

1. Sí

Las etiquetas de pestañas pueden incluir iconos y texto. Las etiquetas de texto deben ser cortas.

2.No

No cambie el tamaño de las etiquetas de texto para que quepan en una sola línea. Si las etiquetas son demasiado largas, ajuste el texto a una segunda línea o use pestañas desplazables.

3. Sí

Presente las pestañas como una sola fila sobre su contenido asociado.

4. Cuidado

Aunque el texto de la etiqueta puede ajustarse a una segunda línea, las pestañas desplazables limitan el texto a una sola fila.

Realizado por: Daniela Emilia Arias Reina

¡Gracias!

https://m2.material.io/components/tabs#anatomy

https://m3.material.io/components/tabs/specs

Bibliografía