A Material Design 3 és Web Components alapú új mdui 2 már elérhető, tekintse meg az mdui 2 dokumentációját.

Lebegő műveletgomb

A lebegő műveletgomb egy, a felhasználói felület felett lebegő kör alakú ikon, amely dinamikus hatásokkal is rendelkezhet, például almenüt jeleníthet meg, vagy elrejtési és megjelenítési animációkat hajthat végre.

Használat

Hívás egyéni attribútumokkal
JavaScript segítségével történő hívás

Kapcsolódó olvasmányok

Material Design tervezési irányelvek: Komponensek – Lebegő műveletgomb

Stílus

Lebegő műveletgomb

Az .mdui-fab osztály hozzáadása egy elemhez lebegő műveletgombbá alakítja azt.

Példa

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

Az .mdui-fab-mini osztály hozzáadásával mini lebegő műveletgomb hozható létre.

Példa

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

Elrejtési/Megjelenítési animáció

Az .mdui-fab-hide osztály hozzáadása a lebegő műveletgombhoz animációval rejti el a gombot, az osztály eltávolítása pedig animációval jeleníti meg azt.

Példa

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

Rögzítés a jobb alsó sarokba

Az .mdui-fab-fixed osztály hozzáadásával a lebegő műveletgomb a jobb alsó sarokba rögzíthető.

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

Futtatás

Gyorstárcsázó menü

HTML szerkezet

Ez a gomb mindig a jobb alsó sarokban marad. Egérrel való rámutatáskor vagy kattintáskor felfelé nyitja meg a gyorstárcsázó menüt.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Alapértelmezés szerint megjelenő ikon -->
    <i class="mdui-icon material-icons">add</i>

    <!-- A gyorstárcsázó menü megnyitásakor erre az ikonra vált át; ha nincs szükség ikonváltásra, ez az elem elhagyható. -->
    <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>

Hívás egyéni attribútumokkal

Ezzel a módszerrel nincs szükség JavaScript-kód írására. Csak adja hozzá az mdui-fab="options" attribútumot az .mdui-fab-wrapper osztályú elemhez a modul aktiválásához.

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

JavaScript segítségével történő hívás

Összetevő inicializálása:

// A szelektor CSS-szelektor, DOM-elem vagy HTML-karakterlánc lehet.
// Az options a beépülő modul paramétereit tartalmazza, lásd alább.
var inst = new mdui.Fab(selector, options);

Futtatás

Paraméter

Paraméter neve	Típus	Alapértelmezett	Leírás
`trigger`	`string`	`hover`	Kiváltási mód. `hover`: Egérrel való rámutatással aktiválódik. `click`: Kattintással aktiválódik.

Metódus

Metódus neve	Leírás
`open()`	A gyorstárcsázó menü megnyitása.
`close()`	A gyorstárcsázó menü bezárása.
`toggle()`	A gyorstárcsázó menü állapotának váltása.
`show()`	A lebegő műveletgomb megjelenítése animációval.
`hide()`	A lebegő műveletgomb elrejtése animációval.
`getState()`	Visszatér a gyorstárcsázó menü aktuális állapotával. Négy állapot lehetséges (`opening`, `opened`, `closing`, `closed`).

Esemény

Esemény neve	Leírás	Célpont	Paraméterek
`open.mdui.fab`	Az esemény akkor váltódik ki, amikor a gyorstárcsázó menü nyitási animációja elkezdődik.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: Példány
`opened.mdui.fab`	Az esemény akkor váltódik ki, amikor a gyorstárcsázó menü nyitási animációja befejeződik.
`close.mdui.fab`	Az esemény akkor váltódik ki, amikor a gyorstárcsázó menü zárási animációja elkezdődik.
`closed.mdui.fab`	Az esemény akkor váltódik ki, amikor a gyorstárcsázó menü zárási animációja befejeződik.

CSS osztályok listája

Osztálynév	Leírás
`.mdui-fab`	Lebegő műveletgomb meghatározása.
`.mdui-fab-mini`	Mini lebegő műveletgomb meghatározása.
`.mdui-fab-hide`	A lebegő műveletgomb elrejtése animációval.
`.mdui-fab-fixed`	A lebegő műveletgomb rögzítése a jobb alsó sarokba.
`.mdui-fab-wrapper`	A gyorstárcsázó menüt tartalmazó lebegő műveletgomb külső eleme.
`.mdui-fab-opened`	Ikon, amelyre a gyorstárcsázó menü megnyitásakor vált a gomb.
`.mdui-fab-dial`	A gyorstárcsázó menü belső elemeit tartalmazó külső elem.

Gomb

Választómező