> ## Documentation Index
> Fetch the complete documentation index at: https://smartac-justin-client-exports.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Vista

> Usa el componente view para crear paneles de contenido intercambiables para diferentes lenguajes de programación, frameworks o alternativas de configuración.

Usa el componente `View` para crear contenido que cambie según la vista seleccionada en un menú desplegable de múltiples vistas. Es especialmente útil para mostrar ejemplos de código o documentación específica para distintos lenguajes de programación o frameworks.

<Tip>
  Usa un componente `View` por lenguaje en cada página. Usa [pestañas](/es/components/tabs) para procedimientos que varían según el lenguaje y [grupos de código](/es/components/code-groups) para ejemplos de código que difieren según el lenguaje.
</Tip>

<View title="JavaScript" icon="js">
  Este contenido solo es visible cuando se selecciona JavaScript.

  ```javascript theme={null}
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  Este contenido solo es visible cuando se selecciona Python.

  ```python theme={null}
  print("Hello from Python!")
  ```
</View>

<div id="example">
  ## Ejemplo
</div>

````mdx JavaScript and Python views theme={null}
<View title="JavaScript" icon="js">
  Este contenido solo es visible cuando se selecciona JavaScript.

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  Este contenido solo es visible cuando se selecciona Python.

  ```python
  print("Hello from Python!")
  ```
</View>
````

<div id="table-of-contents-behavior">
  ## Comportamiento de la tabla de contenidos
</div>

La tabla de contenidos se actualiza automáticamente para mostrar solo los encabezados de la vista seleccionada en ese momento. Cuando cambias entre vistas usando el menú desplegable de vistas múltiples, la tabla de contenidos se actualiza para mostrar los encabezados relevantes para esa vista.

Si tienes estructuras de encabezados diferentes en cada vista, los usuarios solo verán los encabezados que sean relevantes para el idioma o framework que hayan seleccionado.

<div id="properties">
  ## Propiedades
</div>

<ResponseField name="title" type="string" required>
  El título que identifica esta vista. Debe coincidir con una de las opciones del menú desplegable de vistas múltiples.
</ResponseField>

<ResponseField name="icon" type="string">
  Un icono de [Font Awesome](https://fontawesome.com/icons), un icono de [Lucide](https://lucide.dev/icons), una URL de un icono o una ruta relativa a un icono.
</ResponseField>

<ResponseField name="iconType" type="string">
  Solo para iconos de Font Awesome: uno de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>