O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Botão de ação flutuante

O botão de ação flutuante é um ícone circular que flutua sobre a interface do usuário e pode ter efeitos dinâmicos, como menus de sub-opções e animações de exibição e ocultação.

Como usar

Chamar via atributos personalizados
Chamar via JavaScript

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Botão de ação flutuante

Estilo

Botão de ação flutuante

Adicione a classe .mdui-fab a um elemento para torná-lo um botão de ação flutuante.

Exemplo

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

Adicione a classe .mdui-fab-mini para torná-lo um botão de ação flutuante mini.

Exemplo

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

Animação de ocultar/exibir

Adicionar a classe .mdui-fab-hide ao botão de ação flutuante ocultará o botão com uma animação; remover a classe o exibirá com uma animação.

Exemplo

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

Fixar no canto inferior direito

Adicionar a classe .mdui-fab-fixed ao botão permite fixá-lo no canto inferior direito da janela.

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

Executar

Menu de discagem rápida

Estrutura HTML

Este botão permanece fixo no canto inferior direito da janela. Um menu de discagem rápida surge para cima ao passar o mouse ou clicar.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Ícone exibido por padrão -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Alterna suavemente para este ícone quando o menu de discagem rápida começa a abrir; este elemento pode ser omitido se a troca de ícone não for necessária -->
    <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>

Chamar via atributos personalizados

Este método não requer código JavaScript. Basta adicionar mdui-fab="options" ao elemento com .mdui-fab-wrapper para ativar o plugin.

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

Chamar via JavaScript

Instanciando o componente:

// selector é um seletor CSS, elemento DOM ou string HTML
// options são os parâmetros do plugin, veja a lista abaixo
var inst = new mdui.Fab(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`trigger`	`string`	`hover`	Método de acionamento. `hover`: Acionado ao passar o mouse. `click`: Acionado ao clicar.

Método

Nome do método	Descrição
`open()`	Abre o menu de discagem rápida.
`close()`	Fecha o menu de discagem rápida.
`toggle()`	Alterna o estado de abertura do menu de discagem rápida.
`show()`	Exibe todo o botão de ação flutuante com uma animação.
`hide()`	Oculta todo o botão de ação flutuante com uma animação.
`getState()`	Retorna o estado de abertura atual do menu de discagem rápida. Inclui quatro estados (`opening`, `opened`, `closing`, `closed`).

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`open.mdui.fab`	O evento será disparado quando a animação de abertura do menu de discagem rápida começar.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: Instância
`opened.mdui.fab`	O evento será disparado quando a animação de abertura do menu de discagem rápida terminar.
`close.mdui.fab`	O evento será disparado quando a animação de fechamento do menu de discagem rápida começar.
`closed.mdui.fab`	O evento será disparado quando a animação de fechamento do menu de discagem rápida terminar.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-fab`	Define um botão de ação flutuante.
`.mdui-fab-mini`	Define um botão de ação flutuante mini.
`.mdui-fab-hide`	Oculta o botão de ação flutuante com uma animação.
`.mdui-fab-fixed`	Fixa o botão de ação flutuante no canto inferior direito.
`.mdui-fab-wrapper`	Elemento externo do botão de ação flutuante com menu de discagem rápida.
`.mdui-fab-opened`	Ícone para o qual o botão de ação flutuante com menu muda após abrir o menu.
`.mdui-fab-dial`	Elemento externo do menu para o botão de ação flutuante com menu de discagem rápida.

Botão

Campo de seleção