<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/content-switcher/1.png';
import image2 from '../../stories/assets/content-switcher/2.png';
import image3 from '../../stories/assets/content-switcher/3.png';
import image4 from '../../stories/assets/content-switcher/4.png';
import image5 from '../../stories/assets/content-switcher/5.png';
import image6 from '../../stories/assets/content-switcher/6.png';
import image7 from '../../stories/assets/content-switcher/7.png';
import image8 from '../../stories/assets/content-switcher/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={image8} width="150"/>


# Vistas de contenido / Content switcher

El componente vistas de contenido permiten a los usuarios alternar entre dos o más vistas de un contenido complejo, dentro del mismo espacio en la pantalla, y mostrando una sola vista del mismo contenido cada vez. Típicamente cada vista está pensada para un tipo de usuario determinado y este contenido permite ofrecer la visualización de contenido de distintas formas para distintos tipos de usuarios.

<img src={image1} width="400"/>

Las vistas de contenido se utilizan con frecuencia para permitir que el usuario alterne entre diferentes formatos de visualización, como por ejemplo una vista de cuadrícula y una vista de tabla, o una vista funcional y una técnica. 

Su uso esta también recomendado para reducir el tamaño y simplificar el contenido, por ejemplo cuando el contenido tiene una sola categoría y desea dividirla en diferentes subcategorías en diferentes vistas, o cuando se compone de distintas secciones excluyentes y se desea visualizar solo una de ellas.

No se recomienda el uso de las vistas para diferenciar la jerarquía en la información, ni para su uso en pequeños conjuntos de contenidos, en estos casos se recomienda el uso de otros componentes como «pestañas».

Las vistas de contenido están formadas por una pestaña de contenido con la vista seleccionada y una o varias pestañas de contenido seleccionables con las vistas alternativas. Todas las pestañas contienen etiquetas de texto de dos o tres palabras como máximo, con las que comunicar claramente lo que verán los usuarios en su contenido.

### Variaciones

Existen tres tipos de tamaños para el componente vistas de contenido. El tamaño pequeño con una altura de 32px, el normal por defecto de 40px de alto y el grande de 48px de altura.

|                        Altura pequeña                        | Altura normal (por defecto)                                  |                        Altura grande                         |
| :----------------------------------------------------------: | :----------------------------------------------------------- | :----------------------------------------------------------: |
| <img src={image2} width="300"/>| <img src={image3} width="300"/> | <img src={image4} width="300"/> |

### Anatomía

Cada pestaña de vista individual debe tener el mismo ancho. La pestaña de vista con la etiqueta de texto más larga debe tener un espacio de 16 px a la derecha de la etiqueta. El ancho de todas las demás pestañas debe coincidir con la pestaña más ancha.

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

### Comportamiento

Se incluye dos estados de la pestaña de vista de contenido, seleccionado y no seleccionado, utilizando un color de alto contraste el primero. Sólo se podrá seleccionar una vista de contenido a la vez y siempre debe de haber una seleccionada, habiendo una pestaña seleccionable por cada vista de contenido. La primera pestaña de contenido debe determinarse en función del uso y siempre debe ser la selección predeterminada.

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

Los estados interactivos del componente vista de contenido son enabled, selected, hover, focus y disabled.

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


### Código

```
<conten-switcher></content-switcher>
```

### Tokens

#### Color

| Class                       | Property         | Color token      |
| :-------------------------- | :--------------- | :--------------- |
| `.bx--content-switcher-btn` | background-color | `$ui-background` |
| `.bx--content-switcher-btn` | text color       | `$text-02`       |
| `--selected`                | background-color | `$ui-05`         |
| `--selected`                | text color       | `$inverse-01`    |
| `:after`                    | divider          | `$ui-03`         |

#### Estados interactivos

| Class       | Property         | Color token    |
| :---------- | :--------------- | :------------- |
| `:hover`    | background-color | `$hover-ui`    |
| `:hover`    | text color       | `$text-01`     |
| `:focus`    | border           | `$focus`       |
| `:disabled` | background-color | `$disabled-01` |
| `:disabled` | text-color       | `$disabled-02` |

#### Estructura

| Class                       | Property                    | px   | Spacing token |
| :-------------------------- | :-------------------------- | :--- | :------------ |
| `.bx--content-switcher`     | height: default             | 40   | `-`           |
| `.bx--content-switcher`     | height: small               | 32   | `-`           |
| `.bx--content-switcher`     | height: large               | 48   | `-`           |
| `.bx--content-switcher`     | corner radius               | 4    | `-`           |
| `:after`                    | divider                     | 1    | `-`           |
| `.bx--content-switcher-btn` | padding-left, padding-right | 16   | `$spacing-05` |