<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/tabs/01_Pestañas_VariacionesContenidos.png';
import image2 from '../../stories/assets/tabs/02_Pestañas_VariacionesContenedores.png';
import image3 from '../../stories/assets/tabs/03_Pestañas_BloquesContenidos.png';
import image4 from '../../stories/assets/tabs/04_Pestañas_BloquesContenedores.png';
import image5 from '../../stories/assets/tabs/05_Pestañas_AnatomiaContenido.png';
import image6 from '../../stories/assets/tabs/06_Pestañas_AnatomiaContenedores.png';
import image7 from '../../stories/assets/tabs/07_Pestañas_ComportamientoContenido.png';
import image8 from '../../stories/assets/tabs/08_Pestañas_ComportamientoContenedores.png';
import image9 from '../../stories/assets/tabs/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image9} width="150"/>


# Pestañas / Tabs

Las pestañas se emplean para navegar de una manera ágil entre distintas vistas de un mismo contexto.

No se recomienda utilizar un número alto de pestañas. Se considera que 6 o 7 debería ser el máximo para mantener un interfaz despejado y reducir la carga cognitiva de los usuarios. Para situaciones donde se requieran más pestañas, se debería considerar usar otros mecanismos de navegación como los paneles laterales.

El orden de las pestañas debe ser consistente en el producto y tener sentido para el usuario. Aquellas pestañas de contenido similar deberían posicionarse cerca unas de otras.

Aunque estructuralmente es posible, especialmente mezclando distintos tipos de pestañas, no se recomienda incluir varios niveles de pestañas. Complica mucho la arquitectura de componentes y confunde al usuario.

### Variaciones

Las variaciones de las pestañas, dependen sobre todo de la posición e importancia y relación que ocupen respecto a la página y los componentes.

| **Etiquetas de contenidos**   | **Etiquetas de contenedores**  |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image1} width="350"/><br/>      | <br/><img src={image2} width="350"/><br/>                                   |

Las **pestañas de contenidos** forman bloques de información aislados dentro de la página, se posicionan en el interior de elementos de estructura y componentes, y se utiliza para organizar áreas de contenido pequeñas.

<img src={image3} width="500"/>

Las **pestañas de contenedores** forman de grandes agrupaciones de información, suelen posicionarse en grandes elementos estructurales como las páginas y paneles. Se utiliza para organizar grandes áreas de contenido, como las subpáginas.

<img src={image4} width="500"/>

### Contenido

La etiqueta de la pestaña describe el contenido en su interior. Las etiquetas deben ser concisas y con un máximo de dos palabras. No se deben usar iconos en las etiquetas.

### Anatomía

Las etiquetas utilizan el formato de texto largo base Lato 16px regular. Los márgenes de la caja de texto respecto a los laterales son 16px, es decir 2 miniunidades de espaciado, e incluyen un elemento de indicación horizontal (superior o inferior dependiendo de la variación) de 1px que varía de color según el estado.

La combinación de pestañas se realiza posicionando una junto a otra, con un separador de 1px entre ellos. El ancho de las cajas de texto, y por ende de las pestañas es fijo para cada utilización de la misma, y debe ser el mismo para todas las pestañas de la misma combinación.

Anatomía para las pestañas de contenido.

<img src={image5} width="500"/>

Anatomía para las pestañas de contenedores.

<img src={image6} width="500"/>

### Comportamiento

El usuario al clicar en la etiqueta de las distintas pestañas despliega el contenido que estas contienen. El área de pulsación es la caja de texto completa, no solo el literal.

Los estados de las pestañas de contenido son enabled, hover, focus, selected, disabled y skeleton.

<img src={image7} width="500"/>

Los estados de las pestañas para las pestañas de contenedores son enabled, hover, focus, selected, disabled y disabled selected.

<img src={image8} width="500"/>

### Código

```
<tabs></tabs>
```

### Tokens

**Color**

| Class                           | Property      | Color token       |
| :------------------------------ | :------------ | :---------------- |
| `.bx--tabs__nav-link`           | text color    | `$text-02`        |
| `.bx--tabs__nav-item`           | border-bottom | `$ui-03`          |
| `.bx--tabs__nav-link:selected`  | text color    | `$text-01`        |
| `.bx--tabs__nav-item--selected` | border-bottom | `$interactive-04` |

| Class                       | Property      | Color token |
| :-------------------------- | :------------ | :---------- |
| `.bx--tabs__nav-link:hover` | text color    | `$text-01`  |
| `.bx--tabs__nav-item:hover` | border-bottom | `$ui-04`    |
| `.bx--tabs__nav-item:focus` | border        | `$focus`    |

**Tipografía**

| Class                          | Type token      |
| :----------------------------- | :-------------- |
| `.bx--tabs__nav-link:selected` | `$heading-01`   |
| `.bx--tabs__nav-link`          | `$body-long-01` |

**Estructura**

| Class                 | Property                    | Spacing token |
| :-------------------- | :-------------------------- | :------------ |
| `.bx--tabs__nav-item` | border-bottom               | –             |
| `.bx--tabs__nav-link` | padding-left, padding-right | `$spacing-05` |
| `.bx--tabs__nav-link` | padding-top, padding-bottom | `$spacing-03` |
| `bx--tabs__nav-item`  | margin-left                 | –             |