Schede

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

<Tabs>
  <Tab title="npm">npm install jamdesk</Tab>
  <Tab title="pnpm">pnpm add jamdesk</Tab>
</Tabs>

Schede di base

<Tabs>
  <Tab title="First Tab">

    Content for the first tab.

</Tab>
  <Tab title="Second Tab">

    Content for the second tab.

</Tab>
  <Tab title="Third Tab">

    Content for the third tab.

</Tab>
</Tabs>

Tabs, CodeGroup e Accordion a confronto

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:

function App() {
  return <h1>Hello React</h1>;
}

<Tabs>
  <Tab title="React" icon="react" iconType="brands">

    ```jsx
    function App() {
      return <h1>Hello React</h1>;
    }
    ```

</Tab>
  <Tab title="Vue" icon="vuejs" iconType="brands">

    ```vue
    <template>
      <h1>Hello Vue</h1>
    </template>
    ```

</Tab>
</Tabs>

Bordo inferiore

Usa la proprietà borderBottom per aggiungere un separatore visivo sotto il contenuto delle schede:

<Tabs borderBottom>
  <Tab title="Overview">

    This tab group has a bottom border for visual separation.

</Tab>
  <Tab title="Details">

    Useful when tabs contain varying content lengths.

</Tab>
</Tabs>

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:

npm install my-package

Esecuzione:

npm run dev

La sincronizzazione avviene quando i titoli delle schede corrispondono, senza distinzione tra maiuscole e minuscole.

Proprietà

Tabs

Tab

Prossimi passi