Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Pasek aplikacji

Górny pasek aplikacji zwykle znajduje się u góry strony i może zawierać takie elementy jak paski narzędzi, zakładki itp. Na jednej stronie może znajdować się tylko jeden górny pasek aplikacji.

Sposób użycia

Komponent górnego paska aplikacji napisany jest w czystym CSS; wystarczy napisać kod HTML, aby działał.

Kolor

Górny pasek aplikacji nie ma własnego koloru tła. Możesz ustawić kolor tła dla elementów podrzędnych górnego paska aplikacji (pasków narzędzi, zakładek itp.).

Powiązane artykuły

Wytyczne projektowe Material Design: Struktura - Górny pasek aplikacji

Styl

Zawiera tylko pasek narzędzi

Przykład

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

Zawiera tylko zakładki

Przykład

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

Zawiera pasek narzędzi i zakładki

Przykład

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

Przykład

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

Przezroczyste tło

Należy dodać klasę .mdui-shadow-0, aby usunąć cień paska aplikacji.

Przykład

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

Unieruchomiony na górze strony

Dodanie klasy .mdui-appbar-fixed do <div class="mdui-appbar"></div> umożliwia unieruchomienie górnego paska aplikacji na górze strony, dzięki czemu nie przesuwa się on wraz z paskiem przewijania.

Aby górny pasek aplikacji nie zasłaniał zawartości strony, należy dodać klasę do body, aby dodać padding-top do body:

.mdui-appbar-with-toolbar: Tę klasę należy dodać, gdy górny pasek aplikacji zawiera pasek narzędzi.
.mdui-appbar-with-tab: Tę klasę należy dodać, gdy górny pasek aplikacji zawiera zakładki.
.mdui-appbar-with-tab-larger: Tę klasę należy dodać, gdy górny pasek aplikacji zawiera zakładki z ikonami i tekstem.

Jeśli górny pasek aplikacji zawiera inne elementy poza paskiem narzędzi i zakładkami, musisz samodzielnie dodać odpowiedni padding-top do body.

Przykład 1 Przykład 2 Przykład 3

Automatyczne ukrywanie paska aplikacji

Dodanie klasy .mdui-appbar-scroll-hide do <div class="mdui-appbar"></div> ukrywa górny pasek aplikacji przy przewijaniu strony w dół i pokazuje go przy przewijaniu w górę.

Jeśli elementy są generowane dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

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

Uruchom

Automatyczne ukrywanie paska narzędzi w pasku aplikacji

Dodanie klasy .mdui-appbar-scroll-toolbar-hide do <div class="mdui-appbar"></div>, gdy górny pasek aplikacji zawiera jednocześnie pasek narzędzi i zakładki, ukrywa pasek narzędzi przy przewijaniu w dół i pokazuje go przy przewijaniu w górę.

Jeśli elementy są generowane dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.

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

Uruchom

Lista klas CSS

Nazwa klasy	Opis
`.mdui-appbar`	Definiuje górny pasek aplikacji.
`.mdui-appbar-fixed`	Unieruchamia górny pasek aplikacji na górze strony.
`.mdui-appbar-with-toolbar`	Tę klasę należy dodać do elementu `body`, gdy górny pasek aplikacji zawiera pasek narzędzi.
`.mdui-appbar-with-tab`	Tę klasę należy dodać do elementu `body`, gdy górny pasek aplikacji zawiera zakładki.
`.mdui-appbar-with-tab-larger`	Tę klasę należy dodać do elementu `body`, gdy górny pasek aplikacji zawiera zakładki z ikonami i tekstem.
`.mdui-appbar-scroll-hide`	Ukrywa górny pasek aplikacji przy przewijaniu w dół i pokazuje go przy przewijaniu w górę.
`.mdui-appbar-scroll-toolbar-hide`	Ukrywa pasek narzędzi przy przewijaniu w dół i pokazuje go przy przewijaniu w górę, gdy górny pasek aplikacji zawiera jednocześnie pasek narzędzi i zakładki.

Pasek narzędzi

Wysuwany panel nawigacyjny