View
Cree documentación que se adapta al framework o idioma que elija el lector. Secciones completas cambian según la selección.
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
Uso básico
Cree views para distintos lenguajes:
<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:
- Aparece un selector desplegable en la parte superior del contenido
- Los usuarios pueden alternar entre views usando el desplegable
- 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
El título que se muestra en el selector desplegable. Debe ser único dentro de la página.
Un icono de Font Awesome, icono de Lucide, URL de un icono, o ruta relativa a un icono.
Solo para iconos de Font Awesome. Opciones: regular, solid, light, thin, sharp-solid, duotone, brands.