La Anatomia de Tabs

La Anatomía de Tabs

Segun Material Design

¡Vamos!

¡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.

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

¿Cómo funcionan?

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

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

Primaria

Music

Music

Comunity

Home

Plans

Secundaria

Music

Artists

Playlist

Favoritos

Playlist

Podcast

Artists

Se puede usar cuando queremos agrupar contenido relacionado

¿Qué características deben tener?

Elementos & Tipos de Tabs

Estático

Elementos

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

Music

Music

Comunity

Plans

Home

Home

Home

Home

Desplazable

Music

Playlist

Favoritos

Artists

Podcast

Download

Home

Home

Playlist

Artists

Arquitectura

+ info

Desactivado

Enfocado

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.

Home

Home

Activado

Home

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

Usos correctos e incorrectos

3. Sí

1. Sí

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

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

4. Cuidado

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.

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

Bibliografía

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

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

¡Gracias!

Realizado por: Daniela Emilia Arias Reina