El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Botón FAB

El Floating Action Button es un botón circular que aparece sobre la interfaz y puede incluir efectos dinámicos, como menús secundarios emergentes o animaciones de mostrar y ocultar.

Modo de uso

Llamada vía atributos
Llamada vía JavaScript

Lectura relacionada

Pautas de diseño de Material Design: componentes - Floating Action Button

Estilo

Floating Action Button

Añade la clase .mdui-fab a un elemento para convertirlo en un botón de acción flotante.

Ejemplo

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

Añadir la clase .mdui-fab-mini lo convierte en un botón de acción flotante mini.

Ejemplo

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

Animación de mostrar/ocultar

Añadir la clase .mdui-fab-hide a un botón de acción flotante lo ocultará con una animación; si se elimina la clase, se mostrará con una animación.

Ejemplo

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

Fijado en la esquina inferior derecha

Añadir la clase .mdui-fab-fixed fijará el botón en la esquina inferior derecha de la ventana.

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

Ejecutar

Menú de marcación rápida

Estructura HTML

Este botón siempre permanece fijado en la esquina inferior derecha de la ventana. Al pasar el cursor o hacer clic en él se abre un menú de marcación rápida hacia arriba.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Icono mostrado de forma predeterminada -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Cambia suavemente a este icono cuando el menú de marcación rápida empieza a abrirse; este elemento se puede omitir si no se necesita cambiar el icono. -->
    <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>

Llamada vía atributos

Este método no requiere escribir JavaScript. Solo tienes que añadir mdui-fab="options" al elemento que contiene .mdui-fab-wrapper para activar el complemento.

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

Llamada vía JavaScript

Instanciar componente:

// selector es un selector CSS, un elemento DOM o una cadena HTML
// options son los parámetros del complemento; consulta la lista de parámetros de abajo
var inst = new mdui.Fab(selector, options);

Ejecutar

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`trigger`	`string`	`hover`	Método de activación. `hover`: activado al pasar el cursor. `click`: activado al hacer clic.

Método

Nombre del método	Descripción
`open()`	Abrir el menú de marcación rápida.
`close()`	Cerrar el menú de marcación rápida.
`toggle()`	Alternar el estado abierto del menú de marcación rápida.
`show()`	Mostrar todo el botón de acción flotante con una animación.
`hide()`	Ocultar todo el botón de acción flotante con una animación.
`getState()`	Devuelve el estado abierto actual del menú de marcación rápida. Hay cuatro estados (`opening`, `opened`, `closing`, `closed`).

Evento

Nombre del evento	Descripción	Objetivo	Parámetros
`open.mdui.fab`	Se activa cuando el menú de marcación rápida empieza su animación de apertura.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: instancia
`opened.mdui.fab`	Se activa cuando el menú de marcación rápida completa su animación de apertura.
`close.mdui.fab`	Se activa cuando el menú de marcación rápida empieza su animación de cierre.
`closed.mdui.fab`	Se activa cuando el menú de marcación rápida completa su animación de cierre.

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-fab`	Define un botón de acción flotante.
`.mdui-fab-mini`	Define un botón de acción flotante mini.
`.mdui-fab-hide`	Oculta el botón de acción flotante con una animación.
`.mdui-fab-fixed`	Fija el botón de acción flotante en la esquina inferior derecha.
`.mdui-fab-wrapper`	El elemento exterior de un botón de acción flotante con un menú de marcación rápida.
`.mdui-fab-opened`	El icono al que se cambia cuando el botón de acción flotante con menú de marcación rápida abre su menú.
`.mdui-fab-dial`	El elemento exterior de los elementos del menú de un botón de acción flotante con menú de marcación rápida.

Botones

Select