Abas

Sempre que sua página oferecer alternativas paralelas (gerenciadores de pacotes, linguagens de programação ou instruções específicas para cada sistema operacional), Tabs permitem que os leitores escolham uma opção e permaneçam no contexto. Títulos de abas correspondentes são sincronizados automaticamente em toda a página, portanto, selecionar "yarn" em um grupo alterna todos os outros grupos npm/yarn/pnpm para a mesma opção.

Use Tabs quando:

• Existirem várias implementações do mesmo conceito (npm/yarn/pnpm, JavaScript/Python)
• As opções paralelas forem mutuamente exclusivas (os usuários escolhem uma, não ambas)
• A consistência for importante - a escolha do leitor deve persistir em toda a página

Uso

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

Abas básicas

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

Abas vs CodeGroup vs Accordion

Regra prática: use Tabs quando a escolha do leitor (como o gerenciador de pacotes preferido) deve persistir em toda a página. Use CodeGroup para comparações apenas de código. Use Accordion para conteúdos que podem ser relevantes simultaneamente.

Abas com ícones

Adicione ícones aos títulos das abas usando ícones do 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>

Borda inferior

Use a propriedade borderBottom para adicionar um separador visual abaixo do conteúdo das abas:

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

Abas sincronizadas

Abas com títulos correspondentes são sincronizadas automaticamente em toda a página. Clique em "yarn" em um grupo e todas as abas npm/yarn/pnpm da página mudarão juntas:

Instalar:

npm install my-package

Executar:

npm run dev

A sincronização ocorre quando os títulos das abas coincidem, sem distinção entre maiúsculas e minúsculas.

Propriedades

Tabs

Tab

O que vem a seguir?