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

Floating Action Button

Il Floating Action Button è un'icona circolare che fluttua sull'interfaccia utente e può avere effetti dinamici, come l'apertura di sottomenu o animazioni di comparsa e scomparsa.

Modalità d'uso

Chiamata via attributi
Chiamata via JavaScript

Letture correlate

Linee guida di design Material Design: Componenti - Floating Action Button

Stile

Floating Action Button

Aggiungi la classe .mdui-fab a un elemento per renderlo un Floating Action Button.

Esempio

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

Aggiungendo inoltre la classe .mdui-fab-mini, può diventare un Floating Action Button in formato mini.

Esempio

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

Animazione di comparsa/scomparsa

Aggiungendo la classe .mdui-fab-hide al Floating Action Button, il pulsante verrà nascosto con un'animazione; rimuovendo la classe, verrà mostrato con un'animazione.

Esempio

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

Fissato nell'angolo in basso a destra

Aggiungendo la classe .mdui-fab-fixed al Floating Action Button, il pulsante verrà fissato nell'angolo in basso a destra della finestra.

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

Esegui

Menu di composizione rapida (Speed Dial)

Struttura HTML

Questo pulsante è sempre fissato nell'angolo in basso a destra della finestra. Al passaggio del mouse o al clic, apre verso l'alto un menu di composizione rapida.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Icona visualizzata per impostazione predefinita -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Quando il menu inizia ad aprirsi, passa agevolmente a questa icona; se non è necessario cambiare icona, questo elemento può essere omesso. -->
    <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>

Chiamata via attributi

Utilizzando questo metodo non è necessario scrivere codice JavaScript. Basta aggiungere all'elemento che contiene .mdui-fab-wrapper l'attributo mdui-fab="options" per attivare il plugin.

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

Chiamata via JavaScript

Istanziazione del componente:

// Il selettore è un selettore CSS, un elemento DOM o una stringa HTML
// options sono i parametri del plugin, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Fab(selector, options);

Esegui

Parametro

Nome	Tipo	Predefinito	Descrizione
`trigger`	`string`	`hover`	Metodo di attivazione. `hover`: attivazione al passaggio del mouse. `click`: attivazione al clic.

Metodo

Nome metodo	Descrizione
`open()`	Apre il menu di composizione rapida.
`close()`	Chiude il menu di composizione rapida.
`toggle()`	Alterna lo stato di apertura del menu di composizione rapida.
`show()`	Mostra l'intero Floating Action Button con un'animazione.
`hide()`	Nasconde l'intero Floating Action Button con un'animazione.
`getState()`	Restituisce lo stato di apertura corrente del menu di composizione rapida. Include quattro stati (`opening`, `opened`, `closing`, `closed`).

Evento

Nome evento	Descrizione	Target	Parametri
`open.mdui.fab`	L'evento verrà attivato quando il menu inizia l'animazione di apertura.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: istanza
`opened.mdui.fab`	L'evento verrà attivato quando il menu completa l'animazione di apertura.
`close.mdui.fab`	L'evento verrà attivato quando il menu inizia l'animazione di chiusura.
`closed.mdui.fab`	L'evento verrà attivato quando il menu completa l'animazione di chiusura.

Elenco classi CSS

Nome classe	Descrizione
`.mdui-fab`	Definisce un Floating Action Button.
`.mdui-fab-mini`	Definisce un Floating Action Button in formato mini.
`.mdui-fab-hide`	Nasconde il Floating Action Button con un'animazione.
`.mdui-fab-fixed`	Fissa il Floating Action Button nell'angolo in basso a destra.
`.mdui-fab-wrapper`	Elemento esterno del Floating Action Button con menu di composizione rapida.
`.mdui-fab-opened`	Icona a cui passa il Floating Action Button con menu di composizione rapida dopo l'apertura del menu.
`.mdui-fab-dial`	Elemento esterno del menu per il Floating Action Button con menu di composizione rapida.

Button

Select