---
title: Schede
description: Pannelli commutabili per contenuti mutuamente esclusivi, come gestori di pacchetti o linguaggi. I titoli corrispondenti si sincronizzano in tutta la pagina.
---
> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.
Quando la pagina offre alternative parallele (gestori di pacchetti, linguaggi di programmazione, istruzioni specifiche per il sistema operativo), le Tabs permettono ai lettori di effettuare una scelta e mantenerla nel contesto. I titoli delle schede corrispondenti si sincronizzano automaticamente in tutta la pagina: selezionando "yarn" in un gruppo, tutti gli altri gruppi npm/yarn/pnpm vengono aggiornati di conseguenza.
Usa Tabs quando:
- **Esistono più implementazioni** dello stesso concetto (npm/yarn/pnpm, JavaScript/Python)
- **Le opzioni parallele** sono mutuamente esclusive (gli utenti ne scelgono una, non entrambe)
- **La coerenza è importante**: la scelta del lettore deve essere mantenuta in tutta la pagina
## Utilizzo
```mdx
npm install jamdesk
pnpm add jamdesk
```
## Schede di base
Contenuto della prima scheda.
Contenuto della seconda scheda.
Contenuto della terza scheda.
```mdx
Content for the first tab.
Content for the second tab.
Content for the third tab.
```
## Tabs, CodeGroup e Accordion a confronto
| Componente | Ideale per | Sincronizzazione |
|-----------|----------|--------------|
| **Tabs** | Scelte di contenuti mutuamente esclusive | Sì (in tutta la pagina) |
| **CodeGroup** | Blocchi di codice in più linguaggi | No |
| **Accordion** | Sezioni comprimibili e domande frequenti | No |
**Regola generale:** usa Tabs quando la scelta del lettore (come il gestore di pacchetti preferito) deve essere mantenuta in tutta la pagina. Usa CodeGroup per confronti esclusivamente tra blocchi di codice. Usa Accordion per contenuti che possono essere tutti pertinenti.
## Tabs con icone
Aggiungi icone ai titoli delle schede usando le icone Font Awesome:
```jsx
function App() {
return Hello React
;
}
```
```vue
Hello Vue
```
````mdx
```jsx
function App() {
return Hello React
;
}
```
```vue
Hello Vue
```
````
## Bordo inferiore
Usa la proprietà `borderBottom` per aggiungere un separatore visivo sotto il contenuto delle schede:
Questo gruppo di schede ha un bordo inferiore per separare visivamente il contenuto.
Utile quando le schede contengono contenuti di lunghezza variabile.
```mdx
This tab group has a bottom border for visual separation.
Useful when tabs contain varying content lengths.
```
## Schede sincronizzate
Le Tabs con titoli corrispondenti si sincronizzano automaticamente in tutta la pagina. Fai clic su "yarn" in un gruppo e tutte le schede npm/yarn/pnpm della pagina cambieranno insieme:
**Installazione:**
```bash
npm install my-package
```
```bash
yarn add my-package
```
**Esecuzione:**
```bash
npm run dev
```
```bash
yarn dev
```
La sincronizzazione avviene quando i titoli delle schede corrispondono, senza distinzione tra maiuscole e minuscole.
## Proprietà
### Tabs
Aggiunge un bordo inferiore e una spaziatura interna al contenitore del contenuto delle schede. Utile per separare visivamente il contenuto a schede dal resto della pagina.
### Tab
L'etichetta visualizzata nella barra delle schede. Le schede con titoli corrispondenti sincronizzano automaticamente la selezione in tutta la pagina.
Nome dell'icona Font Awesome da visualizzare prima del titolo (ad esempio, "react", "code", "terminal").
Stile dell'icona Font Awesome. Opzioni: `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
## Prossimi passi
Esplora tutti i componenti disponibili
Scopri come usare i componenti in MDX