---
title: View
description: Cree documentación que se adapta al framework o idioma que elija el lector. Secciones completas cambian según la selección.
---

> **For AI agents:** the complete documentation index is at [llms.txt](https://jamdesk.com/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Views le permite crear documentación que se adapta al framework o idioma que elija el lector. A diferencia de Tabs (que muestra varias opciones lado a lado), Views oculta por completo el contenido no seleccionado. Esto mantiene la página más limpia cuando secciones enteras difieren entre frameworks.

Use Views cuando:
- **Secciones enteras de la página** difieren según el framework (no solo fragmentos de código)
- Los **tutoriales** tienen pasos diferentes para distintas tecnologías
- Las **guías de introducción** varían significativamente según la plataforma

<Tip>
Para ejemplos de código que difieren según el lenguaje, use [CodeGroup](https://jamdesk.com/docs/es/components/code-group). Para procedimientos con diferencias menores, use [Tabs](https://jamdesk.com/docs/es/components/tabs). Use Views cuando **secciones enteras** de contenido sean específicas de un framework.
</Tip>

## Uso básico

Cree views para distintos lenguajes:

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

````mdx
<View title="JavaScript" icon="js">
  This content is only visible when JavaScript is selected.

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

<View title="Python" icon="python">
  This content is only visible when Python is selected.

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

## Cómo funciona

Cuando agrega componentes View a una página:

1. Aparece un selector desplegable en la parte superior del contenido
2. Los usuarios pueden alternar entre views usando el desplegable
3. Solo es visible el contenido de la view seleccionada

## View frente a Tabs frente a CodeGroup

| Componente | Ideal para | Alcance |
|-----------|----------|-------|
| **View** | Secciones enteras que difieren según el framework | Cambio de contenido en toda la página |
| **Tabs** | Comparaciones rápidas, gestores de paquetes | Cambio de contenido en línea |
| **CodeGroup** | La misma operación en varios lenguajes | Solo bloques de código |

**Ejemplos de escenarios:**
- "Instalar con npm frente a yarn" → **Tabs** (diferencia pequeña)
- "JavaScript fetch frente a Python requests" → **CodeGroup** (comparación de código)
- "Tutorial de React frente a tutorial de Vue" → **View** (sección entera diferente)

## Props

<ParamField name="title" type="string" required>
  El título que se muestra en el selector desplegable. Debe ser único dentro de la página.
</ParamField>

<ParamField name="icon" type="string">
  Un icono de Font Awesome, icono de Lucide, URL de un icono, o ruta relativa a un icono.
</ParamField>

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

## ¿Qué sigue?

<Columns cols={2}>
  <Card title="Descripción general de componentes" icon="puzzle-piece" href="/es/components/overview">
    Explore todos los componentes disponibles
  </Card>
  <Card title="Conceptos básicos de MDX" icon="file-code" href="/es/content/mdx-basics">
    Aprenda a usar componentes en MDX
  </Card>
</Columns>