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

Bouton FAB

Le Floating Action Button est un bouton circulaire avec une icône, flottant au-dessus de l’interface utilisateur, avec des effets dynamiques tels que des menus secondaires, des animations d’affichage et de masquage.

Utilisation

Appel via attributs
Appel via JavaScript

Lecture associée

Spécifications Material Design : Composant - Floating Action Button

Style

Floating Action Button

Ajoutez la classe .mdui-fab à un élément pour en faire un bouton d’action flottant.

Exemple

<button class="mdui-fab mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button class="mdui-fab mdui-color-theme-accent mdui-ripple">
          <i class="mdui-icon material-icons">add</i></button
        >

Ajoutez également la classe .mdui-fab-mini pour le transformer en bouton d’action flottant mini.

Exemple

<button class="mdui-fab mdui-fab-mini mdui-ripple">
          <i class="mdui-icon material-icons">add</i>
        </button>
        <button
          class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
        >
          <i class="mdui-icon material-icons">add</i></button
        >

Animation d’affichage/masquage

Ajoutez la classe .mdui-fab-hide au bouton d’action flottant pour le masquer avec une animation ; retirez la classe pour l’afficher à nouveau avec une animation.

Exemple

<button
          class="mdui-fab mdui-color-theme-accent mdui-ripple"
          id="fab-animation"
        >
          <i class="mdui-icon material-icons">add</i>
        </button>

        <button class="mdui-btn" id="fab-animation-show">show</button>
        <button class="mdui-btn" id="fab-animation-hide">hide</button>

        <script>
          var fab = document.getElementById('fab-animation');
          document
            .getElementById('fab-animation-show')
            .addEventListener('click', function () {
              fab.classList.remove('mdui-fab-hide');
            });
          document
            .getElementById('fab-animation-hide')
            .addEventListener('click', function () {
              fab.classList.add('mdui-fab-hide');
            });
        </script>

Fixer en bas à droite

Ajoutez la classe .mdui-fab-fixed au bouton d’action flottant pour le fixer en bas à droite de la fenêtre.

<button class="mdui-fab mdui-fab-fixed mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

Exécuter

Menu de composition rapide

Structure HTML

Ce bouton est toujours fixé en bas à droite de la fenêtre. Il fait apparaître un menu de composition rapide vers le haut au survol ou au clic.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Icône affichée par défaut -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Au début de l’ouverture du menu de composition rapide, l’icône passe doucement vers celle-ci ; si vous n’avez pas besoin de changer d’icône, vous pouvez omettre cet élément. -->
    <i class="mdui-icon mdui-fab-opened material-icons">add</i>
  </button>
  <div class="mdui-fab-dial">
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink">
      <i class="mdui-icon material-icons">backup</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
      <i class="mdui-icon material-icons">bookmark</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
      <i class="mdui-icon material-icons">access_alarms</i>
    </button>
    <button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
      <i class="mdui-icon material-icons">touch_app</i>
    </button>
  </div>
</div>

Appel via attributs

Cette méthode ne nécessite pas d’écrire de code JavaScript. Il suffit d’ajouter mdui-fab="options" à l’élément contenant .mdui-fab-wrapper pour activer ce plugin.

<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
  ......
</div>

Appel via JavaScript

Instancier le composant :

// selector est un sélecteur CSS, un élément DOM ou une chaîne HTML
// options est la liste des paramètres du plugin, voir la liste ci-dessous
var inst = new mdui.Fab(selector, options);

Exécuter

Paramètre

Nom	Type	Défaut	Description
`trigger`	`string`	`hover`	Le mode de déclenchement. `hover` : déclencher au survol de la souris. `click` : déclencher au clic.

Méthode

Nom de méthode	Description
`open()`	Ouvrir le menu de composition rapide.
`close()`	Fermer le menu de composition rapide.
`toggle()`	Basculer l’état d’ouverture du menu de composition rapide.
`show()`	Afficher l’ensemble du bouton d’action flottant avec une animation.
`hide()`	Masquer l’ensemble du bouton d’action flottant avec une animation.
`getState()`	Retourner l’état d’ouverture actuel du menu de composition rapide. Il existe quatre états au total : `opening`, `opened`, `closing` et `closed`.

Événement

Nom de l'événement	Description	Cible	Paramètres
`open.mdui.fab`	L’événement est déclenché lorsque l’animation d’ouverture du menu de composition rapide commence.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst` : instance
`opened.mdui.fab`	L’événement est déclenché lorsque l’animation d’ouverture du menu de composition rapide est terminée.
`close.mdui.fab`	L’événement est déclenché lorsque l’animation de fermeture du menu de composition rapide commence.
`closed.mdui.fab`	L’événement est déclenché lorsque l’animation de fermeture du menu de composition rapide est terminée.

Classes CSS

Nom de classe	Description
`.mdui-fab`	Définir un Floating Action Button.
`.mdui-fab-mini`	Définir un Floating Action Button mini.
`.mdui-fab-hide`	Masquer le Floating Action Button avec une animation.
`.mdui-fab-fixed`	Fixer le Floating Action Button en bas à droite.
`.mdui-fab-wrapper`	Élément externe du bouton d’action flottant avec menu de composition rapide.
`.mdui-fab-opened`	Icône à afficher lorsque le menu de composition rapide du bouton d’action flottant est ouvert.
`.mdui-fab-dial`	Élément externe du menu du bouton d’action flottant avec menu de composition rapide.

Bouton

Sélecteur