mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
mintlify[bot]
6de9f09f3a
* docs: fix config keys, MCP URLs, and coverage gaps * docs: mirror PR changes into es, fr, zh translations * Updated mintlify pages - Updated index.mdx Mintlify-Source: dashboard-editor * Apply suggestion from @ethanpalm * Apply suggestion from @ethanpalm --------- Co-authored-by: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com> Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
81 lines
3.2 KiB
Plaintext
81 lines
3.2 KiB
Plaintext
---
|
|
title: "Vista"
|
|
description: "Usa el componente view para crear paneles de contenido intercambiables para diferentes lenguajes de programación, frameworks o alternativas de configuración."
|
|
keywords: ["selector", "contenido específico por lenguaje", "cambio de contenido"]
|
|
boost: 3
|
|
---
|
|
|
|
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.
|
|
|
|
Mintlify construye automáticamente el menú desplegable de vistas múltiples a partir del `title` de cada componente `View` de la página. No necesitas configurar el menú desplegable por separado. Usa un `View` por título en cada página: los títulos duplicados se ignoran, y un `View` sin título nunca se renderiza.
|
|
|
|
<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
|
|
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="example">
|
|
## Ejemplo
|
|
</div>
|
|
|
|
````mdx JavaScript and Python views
|
|
<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. Cada título único de la página se convierte en una opción 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>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Clases CSS adicionales para aplicar al contenedor de la vista.
|
|
</ResponseField>
|