Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Aplikační lišta

Horní aplikační lišta se obvykle nachází v horní části stránky a může obsahovat panel nástrojů, záložky a další komponenty. Každá stránka může mít pouze jednu horní aplikační lištu.

Způsob volání

Komponenta horní aplikační lišty je napsána v čistém CSS, stačí napsat HTML kód.

Barva

Horní aplikační lišta neobsahuje barvu pozadí. Barvu pozadí můžete nastavit pro podřízené prvky (nástrojový panel, záložky atd.).

Související čtení

Designové zásady Material Design: Struktura - Horní aplikační lišta

Styl

Pouze nástrojový panel

Příklad

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

Pouze záložky

Příklad

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

Nástrojový panel a záložky

Příklad

<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říklad

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

Průhledné pozadí

K odstranění stínu horní aplikační lišty je potřeba přidat třídu .mdui-shadow-0.

Příklad

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

Připevněno na horní část stránky

Přidáním třídy .mdui-appbar-fixed k <div class="mdui-appbar"></div> můžete horní aplikační lištu připevnit na horní část stránky a nebude se pohybovat spolu se stránkou.

Aby horní aplikační lišta nepřekrývala obsah stránky, musíte na prvek body přidat třídu, která přidá padding-top k body:

.mdui-appbar-with-toolbar: Tuto třídu je potřeba přidat, pokud horní aplikační lišta obsahuje nástrojový panel.
.mdui-appbar-with-tab: Tuto třídu je potřeba přidat, pokud horní aplikační lišta obsahuje záložky.
.mdui-appbar-with-tab-larger: Tuto třídu je potřeba přidat, pokud horní aplikační lišta obsahuje záložky s ikonami i textem.

Pokud horní aplikační lišta obsahuje jiné prvky než nástrojový panel a záložky, musíte sami přidat vhodný padding-top k body.

Příklad 1 Příklad 2 Příklad 3

Automaticky skrýt horní aplikační lištu

Přidáním třídy .mdui-appbar-scroll-hide k <div class="mdui-appbar"></div> můžete skrýt horní aplikační lištu při posouvání stránky dolů a zobrazit ji při posouvání nahoru.

Pokud je prvek vytvořen dynamicky, musíte jej inicializovat voláním mdui.mutation().

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

Spustit

Automaticky skrýt nástrojový panel v horní aplikační liště

Přidáním třídy .mdui-appbar-scroll-toolbar-hide k <div class="mdui-appbar"></div> můžete skrýt nástrojový panel při posouvání stránky dolů, pokud horní aplikační lišta obsahuje nástrojový panel a záložky.

Pokud je prvek vytvořen dynamicky, musíte jej inicializovat voláním mdui.mutation().

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

Spustit

Seznam CSS tříd

Název třídy	Popis
`.mdui-appbar`	Definuje horní aplikační lištu.
`.mdui-appbar-fixed`	Připevní horní aplikační lištu na horní část stránky.
`.mdui-appbar-with-toolbar`	Tuto třídu je potřeba přidat na prvek `body`, když horní aplikační lišta obsahuje nástrojový panel.
`.mdui-appbar-with-tab`	Tuto třídu je potřeba přidat na prvek `body`, když horní aplikační lišta obsahuje záložky.
`.mdui-appbar-with-tab-larger`	Tuto třídu je potřeba přidat na prvek `body`, když horní aplikační lišta obsahuje záložky s ikonami i textem.
`.mdui-appbar-scroll-hide`	Skryje horní aplikační lištu při posouvání stránky dolů a zobrazí ji při posouvání nahoru.
`.mdui-appbar-scroll-toolbar-hide`	Při posouvání stránky dolů skryje nástrojový panel v horní aplikační liště, která obsahuje nástrojový panel a záložky.

Nástrojová lišta

Boční navigační panel