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

Demo en vivo

  <button type="button" class="rds-tab rds-tab--line">Tab text</button>
  <button type="button" class="rds-tab rds-tab--line rds-tab--line-active">Tab text</button>

Box tabs

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

Demo en vivo

<button type="button" class="rds-tab rds-tab--box">Tab text</button>
<button type="button" class="rds-tab rds-tab--box rds-tab--box-active">Tab text</button>

Estados

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

  • Hover
    Es el estado al pasar el ratón por encima.

  • 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

  • El ancho máximo del agrupamiento será el del contenedor padre.

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