---
title: Viste
description: Crea documentazione che si adatta al framework o alla scelta linguistica del lettore. Intere sezioni cambiano in base alla selezione.
---

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

Le viste consentono di creare documentazione che si adatta al framework o alla scelta linguistica del lettore. A differenza delle Tabs (che mostrano più opzioni affiancate), le viste nascondono completamente i contenuti non selezionati. Questo mantiene la pagina più ordinata quando intere sezioni differiscono tra i framework.

Usa le viste quando:
- **Intere sezioni della pagina** differiscono in base al framework, non solo gli snippet di codice
- I **tutorial** hanno passaggi diversi per tecnologie diverse
- Le **guide introduttive** variano significativamente in base alla piattaforma

<Tip>
Per gli esempi di codice che differiscono in base al linguaggio, usa [CodeGroup](/it/components/code-group). Per le procedure con differenze minori, usa [Tabs](/it/components/tabs). Usa le viste quando **intere sezioni** del contenuto dipendono dal framework.
</Tip>

## Utilizzo di base

Crea viste per linguaggi diversi:

<View title="JavaScript" icon="js">
  Questo contenuto è visibile solo quando JavaScript è selezionato.

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

<View title="Python" icon="python">
  Questo contenuto è visibile solo quando Python è selezionato.

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

## Come funziona

Quando aggiungi componenti View a una pagina:

1. Nella parte superiore del contenuto viene visualizzato un selettore a discesa
2. Gli utenti possono passare da una vista all'altra usando il selettore a discesa
3. È visibile solo il contenuto della vista selezionata

## View, Tabs e CodeGroup a confronto

| Componente | Ideale per | Ambito |
|-----------|----------|-------|
| **View** | Intere sezioni che differiscono in base al framework | Cambio del contenuto dell'intera pagina |
| **Tabs** | Confronti rapidi, gestori di pacchetti | Cambio del contenuto in linea |
| **CodeGroup** | La stessa operazione in più linguaggi | Solo blocchi di codice |

**Esempi:**
- "Installazione con npm o yarn" → **Tabs** (differenza minima)
- "fetch in JavaScript o requests in Python" → **CodeGroup** (confronto tra codice)
- "Tutorial per React o Vue" → **View** (l'intera sezione differisce)

## Props

<ParamField name="title" type="string" required>
  Il titolo visualizzato nel selettore a discesa. Deve essere univoco all'interno della pagina.
</ParamField>

<ParamField name="icon" type="string">
  Un'icona Font Awesome, un'icona Lucide, un URL di un'icona o un percorso relativo a un'icona.
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Solo per le icone Font Awesome. Opzioni: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## E adesso?

<Columns cols={2}>
  <Card title="Panoramica dei componenti" icon="puzzle-piece" href="/it/components/overview">
    Sfoglia tutti i componenti disponibili
  </Card>
  <Card title="Nozioni di base su MDX" icon="file-code" href="/it/content/mdx-basics">
    Scopri come usare i componenti in MDX
  </Card>
</Columns>