---
title: Visualização
description: Crie documentação adaptada ao framework ou idioma escolhido pelo leitor. Seções inteiras mudam conforme a seleção do usuário.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
As Views permitem criar documentação adaptada ao framework ou idioma escolhido pelo leitor. Ao contrário das Tabs (que exibem várias opções lado a lado), as Views ocultam completamente o conteúdo não selecionado. Isso mantém a página mais organizada quando seções inteiras diferem entre frameworks.
Use Views quando:
- **Seções inteiras da página** diferem conforme o framework (não apenas snippets de código)
- **Tutoriais** têm etapas diferentes para tecnologias distintas
- **Guias de primeiros passos** variam significativamente conforme a plataforma
Para exemplos de código que diferem conforme a linguagem, use [CodeGroup](/pt/components/code-group). Para procedimentos com pequenas diferenças, use [Tabs](/pt/components/tabs). Use Views quando **seções inteiras** do conteúdo forem específicas de um framework.
## Uso básico
Crie views para diferentes linguagens:
Este conteúdo só fica visível quando JavaScript está selecionado.
```javascript
console.log("Hello from JavaScript!");
```
Este conteúdo só fica visível quando Python está selecionado.
```python
print("Hello from Python!")
```
````mdx
This content is only visible when JavaScript is selected.
```javascript
console.log("Hello from JavaScript!");
```
This content is only visible when Python is selected.
```python
print("Hello from Python!")
```
````
## Como funciona
Quando você adiciona componentes View a uma página:
1. Um seletor suspenso aparece no topo do conteúdo
2. Os usuários podem alternar entre as views usando o seletor suspenso
3. Apenas o conteúdo da view selecionada fica visível
## View vs Tabs vs CodeGroup
| Componente | Melhor para | Escopo |
|-----------|----------|-------|
| **View** | Seções inteiras que diferem conforme o framework | Alternância de conteúdo em toda a página |
| **Tabs** | Comparações rápidas, gerenciadores de pacotes | Alternância de conteúdo em linha |
| **CodeGroup** | A mesma operação em várias linguagens | Apenas blocos de código |
**Cenários de exemplo:**
- "Instalar com npm vs yarn" → **Tabs** (pequena diferença)
- "fetch em JavaScript vs requests em Python" → **CodeGroup** (comparação de código)
- "Tutorial de React vs tutorial de Vue" → **View** (a seção inteira é diferente)
## Props
O título exibido no seletor suspenso. Deve ser exclusivo na página.
Um ícone do Font Awesome, um ícone do Lucide, uma URL para um ícone ou um caminho relativo para um ícone.
Apenas para ícones do Font Awesome. Opções: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
## O que vem a seguir?
Veja todos os componentes disponíveis
Aprenda a usar componentes em MDX