Zcela nové mdui 2 založené na Material Design 3 a Web Components bylo vydáno, přejděte na dokumentaci mdui 2.

Plovoucí akční tlačítko

Plovoucí akční tlačítko je kruhová ikona, která se vznáší na uživatelském rozhraní a může mít dynamické efekty, jako je vyskakovací submenu a animace zobrazení/skrytí.

Způsob volání

Volání přes atributy
Volání přes JavaScript

Související čtení

Designové zásady Material Design: Komponenty - Plovoucí akční tlačítko

Styl

Plovoucí akční tlačítko

Přidáním třídy .mdui-fab na prvek jej uděláte plovoucím akčním tlačítkem.

Příklad

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

Přidáním třídy .mdui-fab-mini jej uděláte mini plovoucím akčním tlačítkem.

Příklad

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

Animace skrytí/zobrazení

Přidáním třídy .mdui-fab-hide na plovoucí akční tlačítko se tlačítko skryje animací; po odstranění třídy se tlačítko zobrazí animací.

Příklad

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

Fixovat do pravého dolního rohu

Přidáním třídy .mdui-fab-fixed na plovoucí akční tlačítko jej fixujete do pravého dolního rohu okna.

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

Spustit

Menu rychlého vytáčení

Struktura HTML

Toto tlačítko je vždy fixováno v pravém dolním rohu okna. Při přejetí myší nebo kliknutí se vysune menu rychlého vytáčení.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Ikona zobrazená ve výchozím nastavení -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Na začátku otevírání menu se plynule přepne na tuto ikonu. Pokud nepotřebujete přepínat ikonu, můžete tento prvek vynechat -->
    <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>

Volání přes atributy

Tímto způsobem není nutné psát kód v JavaScriptu. Stačí přidat atribut mdui-fab="options" na prvek s třídou .mdui-fab-wrapper a aktivujete plugin.

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

Volání přes JavaScript

Vytvoření instance komponenty:

// selector je CSS selektor, prvek DOM nebo řetězec HTML
// options jsou parametry pluginu, viz seznam parametrů níže
var inst = new mdui.Fab(selector, options);

Spustit

Parametr

Název parametru	Typ	Výchozí hodnota	Popis
`trigger`	`string`	`hover`	Způsob spuštění. `hover`: Spouští se přejetím myší. `click`: Spouští se kliknutím.

Metoda

Název metody	Popis
`open()`	Otevře menu rychlého vytáčení.
`close()`	Zavře menu rychlého vytáčení.
`toggle()`	Přepne stav otevření menu rychlého vytáčení.
`show()`	Zobrazí celé plovoucí akční tlačítko s animací.
`hide()`	Skryje celé plovoucí akční tlačítko s animací.
`getState()`	Vrátí aktuální stav otevření menu rychlého vytáčení. Existují čtyři stavy (`opening`, `opened`, `closing`, `closed`).

Událost

Název události	Popis	Cíl	Parametry
`open.mdui.fab`	Událost bude spuštěna, když menu rychlého vytáčení začne animaci otevírání.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: Instance
`opened.mdui.fab`	Událost bude spuštěna, když menu rychlého vytáčení dokončí animaci otevírání.
`close.mdui.fab`	Událost bude spuštěna, když menu rychlého vytáčení začne animaci zavírání.
`closed.mdui.fab`	Událost bude spuštěna, když menu rychlého vytáčení dokončí animaci zavírání.

Seznam CSS tříd

Název třídy	Popis
`.mdui-fab`	Definuje plovoucí akční tlačítko.
`.mdui-fab-mini`	Definuje mini plovoucí akční tlačítko.
`.mdui-fab-hide`	Skryje plovoucí akční tlačítko s animací.
`.mdui-fab-fixed`	Fixuje plovoucí akční tlačítko do pravého dolního rohu.
`.mdui-fab-wrapper`	Vnější prvek plovoucího akčního tlačítka s menu rychlého vytáčení.
`.mdui-fab-opened`	Ikona, na kterou se přepne plovoucí akční tlačítko s menu rychlého vytáčení po otevření menu.
`.mdui-fab-dial`	Vnější prvek menu plovoucího akčního tlačítka s menu rychlého vytáčení.

Tlačítko

Výběr