Nowy mdui 2 oparty na Material Design 3 i Web Components jest już dostępny, przejdź do dokumentacji mdui 2.

Pływający przycisk akcji

Pływający przycisk akcji to okrągła ikona unosząca się nad UI, która może posiadać efekty dynamiczne, takie jak menu podrzędne oraz animacje wyświetlania i ukrywania.

Sposób użycia

Wywołanie przez atrybuty
Wywołanie przez JavaScript

Powiązane artykuły

Wytyczne projektowe Material Design: Komponenty - Pływający przycisk akcji

Styl

Pływający przycisk akcji

Dodanie klasy .mdui-fab do elementu sprawi, że stanie się on pływającym przyciskiem akcji.

Przykład

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

Dodanie dodatkowej klasy .mdui-fab-mini sprawi, że stanie się on pływającym przyciskiem akcji w wersji mini.

Przykład

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

Animacja ukrywania/wyświetlania

Dodanie klasy .mdui-fab-hide do pływającego przycisku akcji ukryje go za pomocą animacji, a usunięcie tej klasy spowoduje jego ponowne wyświetlenie.

Przykład

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

Przypięty do prawego dolnego rogu

Dodanie klasy .mdui-fab-fixed do pływającego przycisku akcji sprawi, że będzie on przypięty do prawego dolnego rogu okna.

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

Uruchom

Menu szybkiego wybierania

Struktura HTML

Ten przycisk jest zawsze przypięty do prawego dolnego rogu okna. Po najechaniu myszą lub kliknięciu rozwija menu szybkiego wybierania w górę.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Ikona wyświetlana domyślnie -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Podczas otwierania menu szybkiego wybierania następuje płynne przełączenie na tę ikonę. Jeśli zmiana ikony nie jest potrzebna, element ten można pominąć. -->
    <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>

Wywołanie przez atrybuty

W tej metodzie nie trzeba pisać kodu JavaScript. Wystarczy dodać atrybut mdui-fab="options" do elementu z klasą .mdui-fab-wrapper, aby aktywować plugin.

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

Wywołanie przez JavaScript

Instancjonowanie komponentu:

// selector to selektor CSS, element DOM lub ciąg znaków HTML
// options to parametry pluginu, patrz lista poniżej
var inst = new mdui.Fab(selector, options);

Uruchom

Parametr

Nazwa parametru	Typ	Wartość domyślna	Opis
`trigger`	`string`	`hover`	Metoda wyzwalania. `hover`: wyzwalane po najechaniu myszą. `click`: wyzwalane po kliknięciu.

Metoda

Nazwa metody	Opis
`open()`	Otwórz menu szybkiego wybierania.
`close()`	Zamknij menu szybkiego wybierania.
`toggle()`	Przełącz stan otwarcia menu szybkiego wybierania.
`show()`	Wyświetl cały pływający przycisk akcji za pomocą animacji.
`hide()`	Ukryj cały pływający przycisk akcji za pomocą animacji.
`getState()`	Zwraca bieżący stan otwarcia menu szybkiego wybierania. Zawiera cztery stany (`opening`, `opened`, `closing`, `closed`).

Zdarzenie

Nazwa zdarzenia	Opis	Cel	Parametry
`open.mdui.fab`	Zdarzenie wyzwalane przed rozpoczęciem animacji otwierania menu szybkiego wybierania.	`<div class="mdui-fab-wrapper"></div>`	`event._detail.inst`: Instancja
`opened.mdui.fab`	Zdarzenie wyzwalane po zakończeniu animacji otwierania menu szybkiego wybierania.
`close.mdui.fab`	Zdarzenie wyzwalane przed rozpoczęciem animacji zamykania menu szybkiego wybierania.
`closed.mdui.fab`	Zdarzenie wyzwalane po zakończeniu animacji zamykania menu szybkiego wybierania.

Lista klas CSS

Nazwa klasy	Opis
`.mdui-fab`	Definiuje pływający przycisk akcji.
`.mdui-fab-mini`	Definiuje pływający przycisk akcji w wersji mini.
`.mdui-fab-hide`	Ukrywa pływający przycisk akcji za pomocą animacji.
`.mdui-fab-fixed`	Przypina pływający przycisk akcji do prawego dolnego rogu.
`.mdui-fab-wrapper`	Element zewnętrzny pływającego przycisku akcji z menu szybkiego wybierania.
`.mdui-fab-opened`	Ikona, na którą przełącza się pływający przycisk akcji po otwarciu menu.
`.mdui-fab-dial`	Element zewnętrzny menu szybkiego wybierania.

Przycisk

Lista wyboru