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

Barra de Aplicativos

A barra de aplicativos exibe informações e ações relacionadas à tela atual.

A barra de aplicativos superior fornece conteúdo e ações relacionadas à tela atual. Ela é utilizada para a identidade visual, títulos de tela, navegação e ações.

Ela pode se transformar em uma barra de ações contextual ou ser utilizada como uma barra de navegação.

Barra de Aplicativos Simples

News
<AppBar position="static">
  <Toolbar>
    <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
      News
    </Typography>
    <Button color="inherit">Login</Button>
  </Toolbar>
</AppBar>

Barra de Aplicativos com um campo de busca principal

Um campo de busca principal.

Material-UI

Barra de Aplicativos com menu

Photos

Barra de Aplicativos com campo de busca

Uma barra de pesquisa na lateral.

Material-UI

Densa (apenas para desktop)

Photos
<AppBar position="static">
  <Toolbar variant="dense">
    <IconButton edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
      <MenuIcon />
    </IconButton>
    <Typography variant="h6" color="inherit" component="div">
      Photos
    </Typography>
  </Toolbar>
</AppBar>

Proeminente

Uma barra de aplicativos proeminente.

Material-UI

Barra de Aplicativos inferior

Posicionamento fixo

Quando você renderiza a barra de aplicativos com um posicionamento fixo, a dimensão do elemento não afeta o resto da página. Isso pode fazer com que parte do seu conteúdo pareça estar invisível, atrás da barra de aplicativos. Aqui estão 3 soluções possíveis:

  1. Você pode usar position="sticky" ao invés de fixed. ⚠️ sticky não é suportado pelo IE11.
  2. Você pode renderizar um segundo componente <Toolbar />:
function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* conteúdo */}</Toolbar>
      </AppBar>
      <Toolbar />
    </React.Fragment>
  );
}
  1. Você pode usar o CSS theme.mixins.toolbar:
const useStyles = makeStyles(theme => ({
  offset: theme.mixins.toolbar,
}))

function App() {
  const classes = useStyles();
  return (
    <React. Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* conteúdo */}</Toolbar>
      </AppBar>
      <div className={classes.offset} />
    </React.

Rolagem

Você pode usar o hook useScrollTrigger() para responder às ações de rolagem do usuário.

Barra de aplicativos oculta

A barra de aplicativos ficará oculta ao rolar a página para baixo, deixando mais espaço de leitura.

Barra de aplicativos elevada

A barra de aplicativos eleva-se na rolagem para comunicar que o usuário não está na parte superior da página.

Voltar ao topo

Um botão de ação flutuante aparece na rolagem para facilitar o retorno ao topo da página.

useScrollTrigger([options]) => trigger

Argumentos

  1. options (Object [opcional]):

    • options.disableHysteresis (Boolean [opcional]): Padrão false. Desabilita a histerese. Ignora a direção de rolagem ao determinar o valor de trigger.
    • options.target (Node [opcional]): Padrão window.
    • options.threshold (Number [opcional]): Padrão 100. Modifica o valor limite que aciona a trigger quando a barra de rolagem vertical cruzar ou chegar a este limite.

Retornos

trigger: A posição da tela bate com o critério estabelecido?

Exemplos

import useScrollTrigger from '@material-ui/core/useScrollTrigger';

function HideOnScroll(props) {
  const trigger = useScrollTrigger();
  return (
    <Slide in={!trigger}>
      <div>Hello</div>
    </Slide>
  );
}

API