È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

App Bar

La barra dell'applicazione si trova solitamente nella parte superiore della pagina e può contenere componenti come barre degli strumenti e schede (tab). Una pagina può avere una sola barra dell'applicazione.

Modalità d'uso

Il componente della barra dell’applicazione è scritto in puro CSS e funziona semplicemente scrivendo il codice HTML.

Colore

La barra dell’applicazione non ha un colore di sfondo. È possibile impostare il colore di sfondo per i sottoelementi della barra dell’applicazione (barre degli strumenti, schede, ecc.).

Letture correlate

Linee guida di Material Design: Struttura - App Bar

Stile

Contiene solo la barra degli strumenti

Esempio

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

Contiene solo schede

Esempio

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

Contiene sia la barra degli strumenti che le schede

Esempio

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

Esempio

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

Sfondo trasparente

È necessario aggiungere la classe .mdui-shadow-0 per rimuovere l'ombra della barra dell'applicazione.

Esempio

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

Fissato nella parte superiore della pagina

Su <div class="mdui-appbar"></div> aggiungendo la classe .mdui-appbar-fixed, è possibile fissare la barra dell'applicazione nella parte superiore della pagina in modo che non scorra con la barra di scorrimento.

Per evitare che la barra dell'applicazione copra il contenuto della pagina, è necessario aggiungere al body una classe che applichi un padding-top al body:

.mdui-appbar-with-toolbar: questa classe deve essere aggiunta quando la barra dell’applicazione contiene una barra degli strumenti.
.mdui-appbar-with-tab: questa classe deve essere aggiunta quando la barra dell’applicazione contiene schede.
.mdui-appbar-with-tab-larger: questa classe deve essere aggiunta quando la barra dell’applicazione contiene schede con icone e testo contemporaneamente.

Se nella barra dell'applicazione sono presenti elementi diversi dalla barra degli strumenti e dalle schede, è necessario aggiungere autonomamente il padding-top appropriato al body.

Esempio 1 Esempio 2 Esempio 3

Nascondi automaticamente la barra dell'applicazione

Su <div class="mdui-appbar"></div> aggiungendo la classe .mdui-appbar-scroll-hide, la barra dell'applicazione può essere nascosta quando la pagina scorre verso il basso e mostrata quando la pagina scorre verso l'alto.

Se l'elemento è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

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

Esegui

Nascondi automaticamente la barra degli strumenti nella barra dell'applicazione

Su <div class="mdui-appbar"></div> aggiungendo la classe .mdui-appbar-scroll-toolbar-hide, quando la barra dell'applicazione contiene contemporaneamente la barra degli strumenti e le schede, la barra degli strumenti verrà nascosta quando la pagina scorre verso il basso e mostrata quando scorre verso l'alto.

Se l'elemento è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.

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

Esegui

Elenco classi CSS

Nome classe	Descrizione
`.mdui-appbar`	Definisce una barra dell'applicazione (App Bar).
`.mdui-appbar-fixed`	Fissa la barra dell'applicazione nella parte superiore della pagina.
`.mdui-appbar-with-toolbar`	Questa classe deve essere aggiunta al `body` quando la barra dell'applicazione contiene una barra degli strumenti.
`.mdui-appbar-with-tab`	Questa classe deve essere aggiunta al `body` quando la barra dell'applicazione contiene schede.
`.mdui-appbar-with-tab-larger`	Questa classe deve essere aggiunta al `body` quando la barra dell'applicazione contiene schede con icone e testo contemporaneamente.
`.mdui-appbar-scroll-hide`	Nasconde la barra dell'applicazione quando la pagina scorre verso il basso e la mostra quando scorre verso l'alto.
`.mdui-appbar-scroll-toolbar-hide`	Quando la barra dell'applicazione contiene sia la barra degli strumenti che le schede, nasconde la barra degli strumenti quando la pagina scorre verso il basso e la mostra quando scorre verso l'alto.

Toolbar

Navigation Drawer