A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Eszköztár

Az eszköztár vízszintesen elrendezett komponensek gyűjteménye, amely szöveget, linkeket, gombokat, ikon-gombokat és más elemeket tartalmazhat.

Használat

Az eszköztár komponense tiszta CSS-szel készült; a hatás eléréséhez csak HTML kódot kell írni.

Színek

Alapértelmezés szerint átlátszó a háttér, és a .mdui-color-[color] osztály hozzáadásával beállítható a háttérszín.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Eszköztár

Material Design tervezési irányelvek: Szerkezet – Eszköztár

Stílus

Alapstílus

Az eszköztárba a következők helyezhetők:

Szöveg: <span>Title</span>
Link: <a href="#">Link</a>
Gomb: <a href="#" class="mdui-btn">button</a>
Ikon-gomb: <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
Ikon: <i class="mdui-icon material-icons">menu</i>

A <div class="mdui-toolbar-spacer"></div> hozzáadása az elem két oldalán lévő tartalmat a szélekre tolja.

Példa

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

Háttérszín

Példa

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

CSS osztályok listája

Osztálynév	Leírás
`.mdui-toolbar`	Definiál egy eszköztárat.
`.mdui-toolbar-spacer`	Az elem két oldalán lévő elemek a szélekre tolódnak.

Fül

Alkalmazássáv