Ir para o conteúdo principal
Version: 2.0.0-beta.3

Abas

Para mostrar o conteúdo com guias nos arquivos Markdown, você pode recorrer ao MDX. O Docusaurus fornece <Tabs> componentes fora da caixa.

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  defaultValue="apple"  values={[    {label: 'Apple', value: 'apple'},    {label: 'Orange', value: 'orange'},    {label: 'Banana', value: 'banana'},  ]}>  <TabItem value="apple">This is an apple 🍎</TabItem>  <TabItem value="orange">This is an orange 🍊</TabItem>  <TabItem value="banana">This is a banana 🍌</TabItem></Tabs>;

E você receberá o seguinte:

This is an apple 🍎
info

Por padrão, as abas são renderizadas ansiosamente, mas é possível carregá-los preguiçosamente passando a propriedade lazy para o componente Tabs.

Exibindo uma aba padrão#

Defina a propriedade defaultValue no componente Tabs para o valor de rótulo de sua escolha para mostrar a aba correspondente por padrão.

Por exemplo, no exemplo acima, defaultValue="apple" força a aba Apple a ser aberta por padrão.

Se a propriedade defaultValue não é fornecida ou se refere a um valor não existente, apenas os cabeçalhos da aba aparecem até que o usuário clique em uma aba.

Sincronizando opções de guia#

Você pode querer que as escolhas do mesmo tipo de abas sincronizem entre si. Por exemplo, você pode querer fornecer diferentes instruções para usuários no Windows vs usuários no macOS, e você deseja alterar todas as abas de instruções específicas de SO em um clique. Para conseguir isso, você pode dar a todas as abas relacionadas a mesma propriedade groupId. Observe que fazer isso persistirá na escolha no localStorage e todas as <Tab> instâncias com o mesmo groupId serão atualizadas automaticamente quando o valor de uma delas for alterado. Note que groupID são globalmente do namespace.

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Use Ctrl + C to copy.</TabItem><TabItem value="mac">Use Command + C to copy.</TabItem></Tabs>
<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Use Ctrl + V to paste.</TabItem><TabItem value="mac">Use Command + V to paste.</TabItem></Tabs>
Use Ctrl + C to copy.
Use Ctrl + V to paste.

Para todos os grupos de abas que têm o mesmo groupId, os valores possíveis não precisam ser os mesmos. Se um grupo de guias com um valor escolhido não existe em outro grupo de tabulações com o mesmo groupId, o grupo de tabulações com o valor ausente não vai mudar a aba dele. Isso pode ser visto pelo seguinte exemplo. Tente selecionar Linux, e os grupos de abas acima não mudam.

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},    {label: 'Linux', value: 'linux'},  ]}>  <TabItem value="win">I am Windows.</TabItem>  <TabItem value="mac">I am macOS.</TabItem>  <TabItem value="linux">I am Linux.</TabItem></Tabs>
I am Windows.

As opções de guia com diferentes groupIdnão interferem um com o outro:

<Tabs  groupId="operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'macOS', value: 'mac'},  ]}><TabItem value="win">Windows in windows.</TabItem><TabItem value="mac">macOS is macOS.</TabItem></Tabs>
<Tabs  groupId="non-mac-operating-systems"  defaultValue="win"  values={[    {label: 'Windows', value: 'win'},    {label: 'Unix', value: 'unix'},  ]}><TabItem value="win">Windows is windows.</TabItem><TabItem value="unix">Unix is unix.</TabItem></Tabs>
Windows in windows.
Windows is windows.

Personalizando abas#

Você pode querer personalizar a aparência de um determinado conjunto de guias. Para fazer isso, você pode passar a string na propriedade className e a classe CSS especificada será adicionada ao componente Tabs:

import Tabs from '@theme/Tabs';import TabItem from '@theme/TabItem';
<Tabs  className="unique-tabs"  defaultValue="apple"  values={[    {label: 'Apple', value: 'apple'},    {label: 'Orange', value: 'orange'},    {label: 'Banana', value: 'banana'},  ]}>  <TabItem value="apple">This is an apple 🍎</TabItem>  <TabItem value="orange">This is an orange 🍊</TabItem>  <TabItem value="banana">This is a banana 🍌</TabItem></Tabs>;
This is an apple 🍎