Tab

Usa Tabs per alternative parallele: gestori di pacchetti, linguaggi di programmazione o istruzioni specifiche per sistema operativo. Il lettore sceglie una volta e rimane nel contesto. I titoli delle schede uguali si sincronizzano sulla pagina. Seleziona "yarn" in un gruppo e tutti gli altri gruppi npm/yarn/pnpm passeranno allo stesso valore.

Usa Tabs quando:

• Esistono più implementazioni dello stesso concetto (npm/yarn/pnpm, JavaScript/Python)
• Le opzioni parallele si escludono a vicenda (il lettore ne sceglie una)
• La coerenza è importante: la scelta del lettore deve restare valida per 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 pratica: usa Tabs quando la scelta del lettore (come il gestore di pacchetti preferito) deve restare valida per tutta la pagina. Usa CodeGroup per confronti di solo codice. Usa Accordion per contenuti che possono essere tutti rilevanti.

Tabs con icone

Aggiungi icone Font Awesome ai titoli delle schede:

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 prop 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 schede con titoli uguali si sincronizzano sulla pagina. Clicca "yarn" in un gruppo e tutti i gruppi npm/yarn/pnpm della pagina cambieranno di conseguenza:

Installazione:

npm install my-package

Esecuzione:

npm run dev

La sincronizzazione avviene quando i titoli delle schede coincidono (senza distinzione tra maiuscole e minuscole).

Proprietà

Tabs

Tab

Prossimi passi