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 simples sem frescuras.
Item One
<AppBar position="static">
<Tabs value={value} onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</AppBar>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>Rótulos com quebras
Os rótulos longos serão quebrados automaticamente nas abas. Se o rótulo for muito longo para a aba, ele irá exceder e o texto não ficará visível.
Item One
<Paper square>
<Tabs
value={value}
indicatorColor="primary"
textColor="primary"
onChange={handleChange}
aria-label="disabled tabs example"
>
<Tab label="Active" />
<Tab label="Disabled" disabled />
<Tab label="Active" />
</Tabs>
</Paper>Abas fixas
As abas fixas devem ser usadas com um número limitado de abas e quando o posicionamento consistente ajudar na memorização.
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.
<Paper className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
textColor="primary"
centered
>
<Tab label="Item One" />
<Tab label="Item Two" />
<Tab label="Item Three" />
</Tabs>
</Paper>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)
Item One
Botões de rolagem forçados
Botões de rolagem para esquerda e direita serão apresentados independente da largura de exibição do dispositivo.
Item One
Impedir botões de rolagem
Botões de rolagem para a esquerda e para a direita nunca serão apresentados. Toda rolagem deve ser iniciada por meio de mecanismos de rolagem do agente do usuário (por exemplo, deslizar para a esquerda/direita, rolar scroll do mouse, etc.)
Item One
Abas customizadas
Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.
<div className={classes.demo1}>
<AntTabs value={value} onChange={handleChange} aria-label="ant example">
<AntTab label="Tab 1" />
<AntTab label="Tab 2" />
<AntTab label="Tab 3" />
</AntTabs>
<Typography className={classes.padding} />
</div>
<div className={classes.demo2}>
<StyledTabs value={value} onChange={handleChange} aria-label="styled tabs example">
<StyledTab label="Workflows" />
<StyledTab label="Datasets" />
<StyledTab label="Connections" />
</StyledTabs>
<Typography className={classes.padding} />
</div>🎨 Se você está procurando inspiração, você pode verificar os exemplos de customização de MUI Treasury.
Abas verticais
Item One
Abas de navegação
Por padrão, as abas usam um elemento button, mas você pode fornecer sua própria tag customizada ou componente. Veja um exemplo de implementação da navegação por abas:
<Paper square className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
variant="fullWidth"
indicatorColor="primary"
textColor="primary"
aria-label="icon tabs example"
>
<Tab icon={<PhoneIcon />} aria-label="phone" />
<Tab icon={<FavoriteIcon />} aria-label="favorite" />
<Tab icon={<PersonPinIcon />} aria-label="person" />
</Tabs>
</Paper><Paper square className={classes.root}>
<Tabs
value={value}
onChange={handleChange}
variant="fullWidth"
indicatorColor="secondary"
textColor="secondary"
aria-label="icon label tabs example"
>
<Tab icon={<PhoneIcon />} label="RECENTS" />
<Tab icon={<FavoriteIcon />} label="FAVORITES" />
<Tab icon={<PersonPinIcon />} label="NEARBY" />
</Tabs>
</Paper>Acessibilidade
(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tabpanel)
As etapas a seguir são necessárias para fornecer a informação coerente para as tecnologias assistivas:
- Rotule o componente
Tabscomaria-labelouaria-labelledby. - Para os componentes
Tab, precisam estar conectados com seu correspondente[role="tabpanel"]definindo o corretoid,aria-controlsearia-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. As práticas de autoria da WAI-ARIA têm um guia detalhado sobre como decidir quando fazer a seleção seguir automaticamente o foco.
Demonstração
As duas demonstrações seguintes diferem apenas no seu comportamento de navegação por teclado. Foque em uma aba e navegue com as teclas de seta para notar a diferença.
/* Abas onde a seleção segue o foco */
<Tabs selectionFollowsFocus />
/* Abas onde cada aba precisa ser selecionada manualmente */
<Tabs />Tabs where selection follows focus
Tabs where each tab needs to be selected manually
Item One
API experimental
O @material-ui/lab oferece componentes auxiliares que injetam propriedades para implementar abas acessíveis seguindo as práticas de autoria da WAI-ARIA.
<TabContext value={value}>
<AppBar position="static">
<TabList onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" value="1" />
<Tab label="Item Two" value="2" />
<Tab label="Item Three" value="3" />
</TabList>
</AppBar>
<TabPanel value="1">Item One</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>