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

Abas

Docusaurus provides <Tabs> components that you can use thanks to MDX:

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

<Tabs>
<TabItem value="apple" label="Apple" default>
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana">
This is a banana 🍌
</TabItem>
</Tabs>
This is an apple 🍎

It is also possible to provide values and defaultValue props to Tabs:

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

Tabs props take precedence over the TabItem props:
<Tabs
defaultValue="apple"
values={[
{label: 'Apple 1', value: 'apple'},
{label: 'Orange 1', value: 'orange'},
{label: 'Banana 1', value: 'banana'},
]}>
<TabItem value="apple" label="Apple 2">
This is an apple 🍎
</TabItem>
<TabItem value="orange" label="Orange 2">
This is an orange 🍊
</TabItem>
<TabItem value="banana" label="Banana 2" default>
This is a banana 🍌
</TabItem>
</Tabs>
This is an apple 🍎

tip

By default, all tabs are rendered eagerly during the build process, and search engines can index hidden tabs.

It is possible to only render the default tab with <Tabs lazy />.

Exibindo uma aba padrão

The first tab is displayed by default, and to override this behavior, you can specify a default tab by adding default to one of the tab items. You can also set the defaultValue prop of the Tabs component to the label value of your choice. For example, in the example above, either setting default for the value="apple" tab or setting defaultValue="apple" for the tabs forces the "Apple" tab to be open by default.

Docusaurus will throw an error if a defaultValue is provided for the Tabs but it refers to an non-existing value. If you want none of the tabs to be shown by default, use defaultValue={null}.

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">
<TabItem value="win" label="Windows">Use Ctrl + C to copy.</TabItem>
<TabItem value="mac" label="MacOS">Use Command + C to copy.</TabItem>
</Tabs>

<Tabs groupId="operating-systems">
<TabItem value="win" label="Windows">Use Ctrl + V to paste.</TabItem>
<TabItem value="mac" label="MacOS">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">
<TabItem value="win" label="Windows">
I am Windows.
</TabItem>
<TabItem value="mac" label="MacOS">
I am macOS.
</TabItem>
<TabItem value="linux" label="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">
<TabItem value="win" label="Windows">Windows in windows.</TabItem>
<TabItem value="mac" label="MacOS">macOS is macOS.</TabItem>
</Tabs>

<Tabs groupId="non-mac-operating-systems">
<TabItem value="win" label="Windows">Windows is windows.</TabItem>
<TabItem value="unix" label="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">
<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 🍎