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