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

Barre d’outils

La barre d’outils est un ensemble d’éléments disposés horizontalement, pouvant contenir du texte, des liens, des boutons, des boutons avec icône, etc.

Utilisation

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

Couleurs

Par défaut, l’arrière-plan est transparent. Ajoutez la classe .mdui-color-[color] pour définir une couleur d’arrière-plan.

Lecture associée

Spécifications Material Design : Composants - Barre d’outils

Spécifications Material Design : Structure - Barre d’outils

Style

Style de base

Dans une barre d’outils, vous pouvez placer :

Texte : <span>Title</span>
Lien : <a href="#">Lien</a>
Bouton : <a href="#" class="mdui-btn">bouton</a>
Bouton avec icône : <a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
Icône : <i class="mdui-icon material-icons">menu</i>

Ajouter <div class="mdui-toolbar-spacer"></div> pousse le contenu de chaque côté de l’élément vers les bords.

Exemple

<div class="mdui-toolbar">
  <a href="javascript:;" class="mdui-btn mdui-btn-icon">
    <i class="mdui-icon material-icons">menu</i>
  </a>
  <span class="mdui-typo-title">Title</span>
  <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>

Couleur d’arrière-plan

Exemple

<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>
  <span class="mdui-typo-title">Title</span>
  <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>

Classes CSS

Nom de classe	Description
`.mdui-toolbar`	Définir une barre d’outils.
`.mdui-toolbar-spacer`	Les éléments de chaque côté de cet élément seront poussés vers les bords.

Onglet

Barre d’appli