Pular para o conteúdo
Ajude a traduzir esta página

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

<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
  <Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
    <Tab label="Item One" {...a11yProps(0)} />
    <Tab label="Item Two" {...a11yProps(1)} />
    <Tab label="Item Three" {...a11yProps(2)} />
  </Tabs>
</Box>
<TabPanel value={value} index={0}>
  Item One
</TabPanel>
<TabPanel value={value} index={1}>
  Item Two
</TabPanel>
<TabPanel value={value} index={2}>
  Item Three
</TabPanel>

API experimental

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

Item One
<TabContext value={value}>
  <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
    <TabList onChange={handleChange} aria-label="lab API tabs example">
      <Tab label="Item One" value="1" />
      <Tab label="Item Two" value="2" />
      <Tab label="Item Three" value="3" />
    </TabList>
  </Box>
  <TabPanel value="1">Item One</TabPanel>
  <TabPanel value="2">Item Two</TabPanel>
  <TabPanel value="3">Item Three</TabPanel>
</TabContext>

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.

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="wrapped label tabs example"
>
  <Tab
    value="one"
    label="New Arrivals in the Longest Text of Nonfiction that should appear in the next line"
    wrapped
  />
  <Tab value="two" label="Item Two" />
  <Tab value="three" label="Item Three" />
</Tabs>

Abas coloridas

<Tabs
  value={value}
  onChange={handleChange}
  textColor="secondary"
  indicatorColor="secondary"
  aria-label="secondary tabs example"
>
  <Tab value="one" label="Item One" />
  <Tab value="two" label="Item Two" />
  <Tab value="three" label="Item Three" />
</Tabs>

Aba desativada

A tab can be disabled by setting the disabled prop.

<Tabs value={value} onChange={handleChange} aria-label="disabled tabs example">
  <Tab label="Active" />
  <Tab label="Disabled" disabled />
  <Tab label="Active" />
</Tabs>

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.

<Tabs value={value} onChange={handleChange} centered>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
</Tabs>

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)

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons="auto"
  aria-label="scrollable auto tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

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:

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons
  allowScrollButtonsMobile
  aria-label="scrollable force tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

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

<Tabs
  value={value}
  onChange={handleChange}
  variant="scrollable"
  scrollButtons={false}
  aria-label="scrollable prevent tabs example"
>
  <Tab label="Item One" />
  <Tab label="Item Two" />
  <Tab label="Item Three" />
  <Tab label="Item Four" />
  <Tab label="Item Five" />
  <Tab label="Item Six" />
  <Tab label="Item Seven" />
</Tabs>

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:

<Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
  <LinkTab label="Page One" href="/drafts" />
  <LinkTab label="Page Two" href="/trash" />
  <LinkTab label="Page Three" href="/spam" />
</Tabs>

Abas com ícones

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

<Tabs value={value} onChange={handleChange} aria-label="icon tabs example">
  <Tab icon={<PhoneIcon />} aria-label="phone" />
  <Tab icon={<FavoriteIcon />} aria-label="favorite" />
  <Tab icon={<PersonPinIcon />} aria-label="person" />
</Tabs>
<Tabs value={value} onChange={handleChange} aria-label="icon label tabs example">
  <Tab icon={<PhoneIcon />} label="RECENTS" />
  <Tab icon={<FavoriteIcon />} label="FAVORITES" />
  <Tab icon={<PersonPinIcon />} label="NEARBY" />
</Tabs>

Biblioteca de roteamento de terceiros

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

<Tabs
  value={value}
  onChange={handleChange}
  aria-label="icon position tabs example"
>
  <Tab icon={<PhoneIcon />} label="top" />
  <Tab icon={<PhoneMissedIcon />} iconPosition="start" label="start" />
  <Tab icon={<FavoriteIcon />} iconPosition="end" label="end" />
  <Tab icon={<PersonPinIcon />} iconPosition="bottom" label="bottom" />
</Tabs>

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.

API