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 ferramentas

Uma toolbar é uma coleção de componentes organizados horizontalmente que pode conter elementos como texto, links, botões, botões de ícone, etc.

Como usar

O componente toolbar é escrito em CSS puro, e entra em vigor simplesmente escrevendo o código HTML.

Cor

O padrão é um fundo transparente. Adicione a classe .mdui-color-[color] para definir a cor de fundo.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Toolbars

Diretrizes de design do Material Design: Estrutura - Toolbars

Estilo

Estilo básico

Na barra de ferramentas, você pode colocar:

Texto: <span>Título</span>
Links: <a href="#">Link</a>
Botões: <a href="#" class="mdui-btn">botão</a>
Botões de ícone: <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
Ícones: <i class="mdui-icon material-icons">menu</i>

Adicionar <div class="mdui-toolbar-spacer"></div> empurrará o conteúdo em ambos os lados deste elemento para as laterais.

Exemplo

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <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>

Cor de fundo

Exemplo

<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>
  <span class="mdui-typo-title">Title</span>
  <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>

Lista de classes CSS

Nome da classe	Descrição
`.mdui-toolbar`	Define uma toolbar.
`.mdui-toolbar-spacer`	Os elementos em ambos os lados deste elemento serão empurrados para as laterais.

Aba

Barra de aplicativo