Pular para o conteúdo

Abas

As abas facilitam a exploração e alternam entre diferentes visualizações.

As abas organizam e permitem a navegação entre grupos de conteúdo relacionados e no mesmo nível hierárquico.

Abas simples

Um exemplo básico com painéis de guias.

Item One

Press Enter to start editing

API experimental

@mui/lab offers utility components that inject props to implement accessible tabs following WAI-ARIA authoring practices.

Item One
Press Enter to start editing

Rótulos com quebras

Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow, and the text will not be visible.

Press Enter to start editing

Abas coloridas

Press Enter to start editing

Aba desativada

A tab can be disabled by setting the disabled prop.

Press Enter to start editing

Abas fixas

Fixed tabs should be used with a limited number of tabs, and when a consistent placement will aid muscle memory.

Largura total

A propriedade variant="fullWidth" deve ser usada em telas menores. Esta demo também usa react-swipeable-views para animar a transição das abas e permite que estas sejam trocadas em dispositivos que permitem o toque.

Item One

Centralizado

A propriedade centered deve ser usada para telas maiores.

Press Enter to start editing

Abas roláveis

Botões de rolagem automáticos

Botões de rolagem para a esquerda e para a direita serão automaticamente apresentados em visualizações desktop e ocultos em móveis. (com base na largura da janela de visualização)

Press Enter to start editing

Botões de rolagem forçados

Botões de rolagem esquerda e direita são apresentados (espaço reserva) independente da largura de exibição com scrollButtons={true} allowScrollButtonsMobile:

Press Enter to start editing

Se você quiser certificar-se de que os botões são sempre visíveis, você deve customizar a opacidade.

.MuiTabs-scrollButtons.Mui-disabled {
  opacity: 0.3;
}

Impedir botões de rolagem

Botões de rolagem da esquerda e direita nunca serão apresentados com scrollButtons={false}. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift mouse wheel, etc.)

Press Enter to start editing

Abas customizadas

Aqui está um exemplo de customização do componente. You can learn more about this in the overrides documentation page.

🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.

Abas verticais

O rótulo das abas podem ser compostos apenas por ícones ou apenas por texto.

Item One

Note que você pode restaurar a barra de rolagem com visibleScrollbar.

Por padrão, as guias usam um elemento botão, mas você pode fornecer sua tag ou componente personalizado. Veja um exemplo de implementação da navegação por abas:

Press Enter to start editing

Abas com ícones

O rótulo das abas podem ser compostos apenas por ícones ou apenas por texto.

Press Enter to start editing
Press Enter to start editing

Biblioteca de roteamento de terceiros

By default, the icon is positioned at the top of a tab. Other supported positions are start, end, bottom.

Press Enter to start editing

Acessibilidade

One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. O componente Aba fornece o componente prop para lidar com este caso de uso. Here is a more detailed guide.

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/)

As etapas a seguir são necessárias para fornecer a informação coerente para as tecnologias assistivas:

  1. Rotule o componente Tabs com aria-label ou aria-labelledby.
  2. Para os componentes Tab, precisam estar conectados com seu correspondente [role="tabpanel"] definindo o correto id, aria-controls e aria-labelledby.

Um exemplo para a implementação atual pode ser encontrado nas demonstrações desta página. Nós também publicamos uma API experimental no pacote @material-ui/lab que não requer nenhum trabalho extra.

Navegação por teclado

Os componentes implementam a navegação do teclado usando o comportamento de "ativação manual". Se você quiser mudar para o comportamento "seleção segue automaticamente o foco" você deve definir selectionFollowsFocus no componente Tabs. The WAI-ARIA authoring practices have a detailed guide on how to decide when to make selection automatically follow focus.

Demonstração

As duas demonstrações seguintes diferem apenas no seu comportamento de navegação por teclado. Focus a tab and navigate with arrow keys to notice the difference, e.g. Arrow Left.

/* Abas onde a seleção segue o foco */
<Tabs selectionFollowsFocus />
/* Tabs where each tab needs to be selected manually */
<Tabs />

Unstyled

The component also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size.