Tabs

Las tabs se utilizan para navegar rápidamente entre vistas dentro del mismo contexto. Cada tab describe el contenido que contiene. Las etiquetas tienen que ser cortas y no usan más de tres palabras.

Variaciones y tipos

Diferenciamos dos tipos: Line tabs y box tabs.

Line tabs

Box tabs

El contenedor se adapta siempre al contenido ya que éste debe ser legible en todo momento. Nunca pasará a 2 líneas.

Estados

  • Default
    Es el estado normal, sin ninguna interacción sobre ella.

  • Selected
    Comunica que el usuario ha seleccionado este elemento, la tab aparece activada.

  • Disabled
    No se puede interactuar con la tab porque está desactivada.

Comportamiento

  • Para ambos tipos, el ancho máximo del agrupamiento será el del contenedor padre.

  • Tanto para line tabs como box tabs, en el caso de que el último item se quedase fuera de este contenedor, se aplicaría elipsis.

Usos

  • Las etiquetas de las pestañas tienen que ser breves y concisas, y siempre comenzarán por mayúscula.
  • Para no saturar al usuario de información, se pueden permitir hasta cinco pestañas sin slider. Si hay 6 o más se adoptará un slider dentro de las tabs. Aun así, es recomendable limitar su uso hasta 5 tabs.
  • En dispositivos small device se recomienda no hacer uso de más de tres tabs.