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

Barra de Aplicativos com um campo de busca principal

Um campo de busca principal.

Barra de Aplicativos com menu

Barra de Aplicativos com campo de busca

Uma barra de pesquisa na lateral.

Densa (apenas para desktop)

Proeminente

Uma barra de aplicativos proeminente.

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>
  );
}

3. Você pode usar o CSS theme.mixins.toolbar:

const Offset = styled('div')(({ theme }) => theme.mixins.toolbar);

function App() {
  return (
    <React.Fragment>
      <AppBar position="fixed">
        <Toolbar>{/* content */}</Toolbar>
      </AppBar>
      <Offset />
    </React.Fragment>
  );
}

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 [optional]):

   • options.disableHysteresis (bool [optional]): Defaults to 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>
  );
}

Enable Color on Dark

Following the Material Design guidelines, the color prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the enableColorOnDark prop to true.

// Specific element via prop
<AppBar enableColorOnDark />

// Affect all AppBars via theme
<ThemeProvider
  theme={createTheme({
    components: {
      MuiAppBar: {
        defaultProps: {
          enableColorOnDark: true,
        },
      },
    },
  })}
>
  <AppBar />
</ThemeProvider>

API

• <AppBar />
• <Menu />
• <Toolbar />