mdui 2 est arrivé, basé sur Material Design 3 et les Web Components. Consultez la documentation de mdui 2 ici.

Barre d’appli

La Top App Bar se trouve généralement en haut de la page et peut contenir des barres d’outils, des onglets et d’autres composants. Une page ne peut avoir qu’une seule Top App Bar.

Utilisation

Le composant de Top App Bar est écrit en CSS pur ; il suffit d’écrire du code HTML pour qu’il fonctionne.

Couleur

La Top App Bar n’a pas de couleur d’arrière-plan. Vous pouvez définir une couleur d’arrière-plan pour les éléments enfants de la Top App Bar (barres d’outils, onglets, etc.).

Lecture associée

Spécifications Material Design : Structure - Top App Bar

Style

Barre d’outils seule

Exemple

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

Onglets seuls

Exemple

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

Barre d’outils et onglets

Exemple

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

Exemple

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

Arrière-plan transparent

Vous devez ajouter la classe .mdui-shadow-0 pour supprimer l’ombre de la Top App Bar.

Exemple

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

Épingler en haut de la page

Ajoutez la classe .mdui-appbar-fixed à <div class="mdui-appbar"></div> pour fixer la Top App Bar en haut de la page, sans qu’elle suive le défilement.

Pour éviter que la Top App Bar ne recouvre le contenu de la page, ajoutez une classe à body pour ajouter un padding-top à body :

.mdui-appbar-with-toolbar : ajoutez cette classe lorsque la Top App Bar contient une barre d’outils.
.mdui-appbar-with-tab : ajoutez cette classe lorsque la Top App Bar contient des onglets.
.mdui-appbar-with-tab-larger : ajoutez cette classe lorsque la Top App Bar contient à la fois des onglets avec icône et texte.

Si la Top App Bar contient d’autres éléments en plus des barres d’outils et des onglets, vous devez ajouter vous-même un padding-top approprié à body.

Exemple 1 Exemple 2 Exemple 3

Auto-masquage de la Top App Bar

Ajoutez la classe .mdui-appbar-scroll-hide à <div class="mdui-appbar"></div> pour masquer la Top App Bar lorsque la page défile vers le bas et l’afficher lorsque la page défile vers le haut.

Si l’élément est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

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

Exécuter

Auto-masquage de la barre d’outils dans la Top App Bar

Ajoutez la classe .mdui-appbar-scroll-toolbar-hide à <div class="mdui-appbar"></div>. Lorsque la Top App Bar contient à la fois une barre d’outils et des onglets, celle-ci masque la barre d’outils lors du défilement vers le bas et l’affiche lors du défilement vers le haut.

Si l’élément est généré dynamiquement, vous devez appeler mdui.mutation() pour l’initialiser.

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

Exécuter

Classes CSS

Nom de classe	Description
`.mdui-appbar`	Définir une Top App Bar.
`.mdui-appbar-fixed`	Épingler la Top App Bar en haut de la page.
`.mdui-appbar-with-toolbar`	Ajoutez cette classe à `body` lorsque la Top App Bar contient une barre d’outils.
`.mdui-appbar-with-tab`	Ajoutez cette classe à `body` lorsque la Top App Bar contient des onglets.
`.mdui-appbar-with-tab-larger`	Ajoutez cette classe à `body` lorsque la Top App Bar contient à la fois des onglets avec icône et texte.
`.mdui-appbar-scroll-hide`	Masquer la Top App Bar au défilement vers le bas et l’afficher au défilement vers le haut.
`.mdui-appbar-scroll-toolbar-hide`	Lorsque la Top App Bar contient à la fois une barre d’outils et des onglets, masquer la barre d’outils au défilement vers le bas et l’afficher au défilement vers le haut.

Barre d’outils

Tiroir de navigation