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

Alkalmazássáv

A felső alkalmazássáv jellemzően az oldal tetején helyezkedik el, és olyan komponenseket tartalmazhat, mint az eszköztárak és a fülek. Egy oldalon egyszerre csak egy felső alkalmazássáv lehet.

Használat

A felső alkalmazássáv komponense tiszta CSS-szel készült; a megjelenítéséhez csak HTML kódot kell írni.

Szín

A felső alkalmazássáv nem rendelkezik saját háttérszínnel; a háttérszínt az alkalmazássáv gyermekelemeinek (eszköztárak, fülek stb.) kell beállítani.

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Szerkezet - Felső alkalmazássáv

Stílus

Csak eszköztár

Példa

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

Csak fülek

Példa

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

Eszköztár és fülek

Példa

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

Példa

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

Átlátszó háttér

Az alkalmazássáv árnyékának eltávolításához hozzá kell adni a .mdui-shadow-0 osztályt.

Példa

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

Rögzítés az oldal tetejéhez

A .mdui-appbar-fixed osztály hozzáadása a <div class="mdui-appbar"></div> elemhez rögzíti az alkalmazássávot az oldal tetején, így az nem gördül az oldallal együtt.

Annak érdekében, hogy az alkalmazássáv ne takarja el az oldal tartalmát, a body elemhez egy osztályt kell adni, amellyel a body elemhez padding-top adható hozzá:

.mdui-appbar-with-toolbar: Ezt az osztályt akkor kell hozzáadni, ha az alkalmazássáv eszköztárat tartalmaz.
.mdui-appbar-with-tab: Ezt az osztályt akkor kell hozzáadni, ha az alkalmazássáv füleket tartalmaz.
.mdui-appbar-with-tab-larger: Ezt az osztályt akkor kell hozzáadni, ha az alkalmazássáv olyan füleket tartalmaz, amelyek ikont és szöveget is megjelenítenek.

Ha az alkalmazássáv az eszköztáron és a füleken kívül más elemeket is tartalmaz, saját magának kell beállítania a megfelelő padding-top értéket a body elemen.

1. példa 2. példa 3. példa

Felső alkalmazássáv automatikus elrejtése

A .mdui-appbar-scroll-hide osztály hozzáadása a <div class="mdui-appbar"></div> elemhez elrejti az alkalmazássávot lefelé görgetéskor, és megjeleníti felfelé görgetéskor.

Ha az elemek dinamikusan jönnek létre, a mdui.mutation() függvényt kell meghívni az inicializáláshoz.

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

Futtatás

Eszköztár automatikus elrejtése a felső alkalmazássávban

A .mdui-appbar-scroll-toolbar-hide osztály hozzáadása a <div class="mdui-appbar"></div> elemhez elrejti az eszköztárat lefelé görgetéskor, és megjeleníti felfelé görgetéskor, ha az alkalmazássáv eszköztárat és füleket is tartalmaz.

Ha az elemek dinamikusan jönnek létre, a mdui.mutation() függvényt kell meghívni az inicializáláshoz.

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

Futtatás

CSS osztályok listája

Osztálynév	Leírás
`.mdui-appbar`	Felső alkalmazássáv definiálása.
`.mdui-appbar-fixed`	A felső alkalmazássáv rögzítése az oldal tetejéhez.
`.mdui-appbar-with-toolbar`	Ezt az osztályt a `body` elemhez kell adni, ha az alkalmazássáv eszköztárat tartalmaz.
`.mdui-appbar-with-tab`	Ezt az osztályt a `body` elemhez kell adni, ha az alkalmazássáv füleket tartalmaz.
`.mdui-appbar-with-tab-larger`	Ezt az osztályt a `body` elemhez kell adni, ha az alkalmazássáv ikont és szöveget is tartalmazó füleket tartalmaz.
`.mdui-appbar-scroll-hide`	Alkalmazássáv elrejtése lefelé görgetéskor, megjelenítése felfelé görgetéskor.
`.mdui-appbar-scroll-toolbar-hide`	Eszköztár elrejtése lefelé görgetéskor, megjelenítése felfelé görgetéskor, ha az alkalmazássáv eszköztárat és füleket is tartalmaz.

Eszköztár

Navigációs fiók