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

Guias

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

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

Guias 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 guias. Se o rótulo for muito longo para a guia, ele irá exceder e o texto não ficará visível.

Item One

Guia desativada

Uma guia pode ser desabilitada definindo a propriedade disabled.

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

Guias fixas

As guias fixas devem ser usadas com um número limitado de guias e quando o posicionamento consistente ajudar a memória muscular.

Largura total

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

Item One

Centralizado

A propriedade centered deve ser usada para views maiores.

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

Guias 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

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

Guias verticais

Item One

Guias de navegação

Por padrão, as guias usam um elemento button, mas você pode fornecer sua própria tag personalizada ou componente. Veja um exemplo de implementação da navegação por guias:

Page OnePage TwoPage Three

Guias com ícones

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

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

API