O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Barra de aplicativo

As barras de aplicativo geralmente estão localizadas no topo da página e podem conter barras de ferramentas, abas e outros componentes. Cada página pode ter apenas uma barra de aplicativo.

Como usar

O componente de barra de aplicativo é escrito em CSS puro, bastando escrever o código HTML para que ele funcione.

Cor

A barra de aplicativo não possui cor de fundo por padrão. Você pode definir cores de fundo para os elementos filhos da barra de aplicativo (barras de ferramentas, abas, etc.).

Leitura relacionada

Diretrizes de design do Material Design: Estrutura - Barra de aplicativo

Estilo

Apenas barra de ferramentas

Exemplo

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-headline">MDUI</a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

Apenas abas

Exemplo

<div class="mdui-appbar">
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Com barra de ferramentas e abas

Exemplo

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">web</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">shopping</a>
    <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">videos</a>
  </div>
</div>

Exemplo

<div class="mdui-appbar">
  <div class="mdui-toolbar mdui-color-theme">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
  <div class="mdui-tab mdui-color-theme" mdui-tab>
    <a href="#example6-tab1" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">phone</i>
      <label>recents</label>
    </a>
    <a href="#example6-tab2" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">favorite</i>
      <label>favorites</label>
    </a>
    <a href="#example6-tab3" class="mdui-ripple mdui-ripple-white">
      <i class="mdui-icon material-icons">perm_contact_calendar</i>
      <label>nearby</label>
    </a>
  </div>
</div>

Fundo transparente

É necessário adicionar a classe .mdui-shadow-0 para remover a sombra da barra de aplicativo.

Exemplo

<div class="mdui-appbar mdui-shadow-0">
  <div class="mdui-toolbar">
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">menu</i>
    </a>
    <a href="javascript:;" class="mdui-typo-title">Title</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">search</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">refresh</i>
    </a>
    <a href="javascript:;" class="mdui-btn mdui-btn-icon">
      <i class="mdui-icon material-icons">more_vert</i>
    </a>
  </div>
</div>

Fixar no topo da página

Adicionar a classe .mdui-appbar-fixed em <div class="mdui-appbar"></div> permite fixar a barra de aplicativo no topo da página, sem rolar com a barra de rolagem.

Para evitar que a barra de aplicativo cubra o conteúdo da página, é necessário adicionar classes ao body para adicionar padding-top ao body:

.mdui-appbar-with-toolbar: Adicione esta classe quando a barra de aplicativo contiver uma barra de ferramentas.
.mdui-appbar-with-tab: Adicione esta classe quando a barra de aplicativo contiver abas.
.mdui-appbar-with-tab-larger: Adicione esta classe quando a barra de aplicativo contiver abas com ícone e texto simultaneamente.

Se a barra de aplicativo contiver outros elementos além de barras de ferramentas e abas, você precisará adicionar o padding-top apropriado ao body por conta própria.

Exemplo 1 Exemplo 2 Exemplo 3

Esconder automaticamente a barra de aplicativo

Adicionar a classe .mdui-appbar-scroll-hide em <div class="mdui-appbar"></div> permite esconder a barra de aplicativo ao rolar para baixo e mostrá-la ao rolar para cima.

Se os elementos forem gerados dinamicamente, você precisará chamar mdui.mutation() para inicialização.

<body class="mdui-appbar-with-toolbar">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
    <div class="mdui-toolbar">
      ......
    </div>
  </div>
</body>

Executar

Esconder automaticamente a barra de ferramentas na barra de aplicativo

Adicionar a classe .mdui-appbar-scroll-toolbar-hide em <div class="mdui-appbar"></div> esconde a barra de ferramentas ao rolar para baixo e a mostra ao rolar para cima quando a barra de aplicativo contém tanto barra de ferramentas quanto abas.

Se os elementos forem gerados dinamicamente, você precisará chamar mdui.mutation() para inicialização.

<body class="mdui-appbar-with-toolbar mdui-appbar-with-tab">
  <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
    <div class="mdui-toolbar">
      ......
    </div>
    <div class="mdui-tab">
      ......
    </div>
  </div>
</body>

Executar

Lista de classes CSS

Nome da classe	Descrição
`.mdui-appbar`	Define uma barra de aplicativo.
`.mdui-appbar-fixed`	Fixa a barra de aplicativo no topo da página.
`.mdui-appbar-with-toolbar`	Adicione esta classe ao `body` quando a barra de aplicativo contiver uma barra de ferramentas.
`.mdui-appbar-with-tab`	Adicione esta classe ao `body` quando a barra de aplicativo contiver abas.
`.mdui-appbar-with-tab-larger`	Adicione esta classe ao `body` quando a barra de aplicativo contiver abas com ícone e texto simultaneamente.
`.mdui-appbar-scroll-hide`	Esconde a barra de aplicativo ao rolar para baixo e mostra ao rolar para cima.
`.mdui-appbar-scroll-toolbar-hide`	Esconde a barra de ferramentas ao rolar para baixo e a mostra ao rolar para cima quando a barra de aplicativo contém tanto barra de ferramentas quanto abas.

Barra de ferramentas

Gaveta de navegação