menuMDUIDocs
color_lens
Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Floating Action Button

Ein Floating Action Button ist ein kreisförmiges Symbol, das über der Oberfläche schwebt und dynamische Effekte wie das Einblenden von Untermenüs oder Ein-/Ausblendanimationen haben kann.

Verwendung

  1. Aufruf über Attribute
  2. Aufruf über JavaScript

Verwandte Themen

Material Design-Richtlinien: Komponenten - Floating Action Button

Stil

Floating Action Button

Fügen Sie dem Element die Klasse .mdui-fab hinzu, um es zu einem Floating Action Button zu machen.

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

Fügen Sie zusätzlich die Klasse .mdui-fab-mini hinzu, um ihn in einen Mini-Floating Action Button zu verwandeln.

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

Ein-/Ausblendanimation

Das Hinzufügen der Klasse .mdui-fab-hide zum Floating Action Button blendet den Button animiert aus. Durch Entfernen der Klasse wird der Button animiert wieder eingeblendet.

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

Unten rechts fixiert

Durch Hinzufügen der Klasse .mdui-fab-fixed zum Floating Action Button wird dieser in der unteren rechten Ecke des Fensters fixiert.

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

Schnellauswahlmenü

HTML-Struktur

Dieser Button ist immer in der unteren rechten Ecke des Fensters fixiert. Beim Hovern oder Klicken öffnet sich ein Schnellauswahlmenü nach oben.

<div class="mdui-fab-wrapper" id="exampleFab">
  <button class="mdui-fab mdui-ripple mdui-color-theme-accent">
    <!-- Standardmäßig angezeigtes Icon -->
    <i class="mdui-icon material-icons">add</i>

    <!-- Wechselt sanft zu diesem Icon, wenn sich das Schnellauswahlmenü zu öffnen beginnt. Wenn kein Icon-Wechsel erforderlich ist, kann dieses Element weggelassen werden. -->
    <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>

Aufruf über Attribute

Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie einfach mdui-fab="options" zu einem Element mit der Klasse .mdui-fab-wrapper hinzu, um das Plugin zu aktivieren.

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

Aufruf über JavaScript

Komponente instanziieren:

// selector ist ein CSS-Selektor, ein DOM-Element oder ein HTML-String.
// options sind die Plugin-Parameter, siehe die Parameterliste unten.
var inst = new mdui.Fab(selector, options);
Ausführen

Parameter

ParameternameTypStandardwertBeschreibung
triggerstringhoverTrigger-Methode.
  • hover: Auslösung beim Hovern mit der Maus.
  • click: Auslösung beim Klicken.

Methode

MethodennameBeschreibung
open()Schnellauswahlmenü öffnen.
close()Schnellauswahlmenü schließen.
toggle()Umschalten des Öffnungsstatus des Schnellauswahlmenüs.
show()Den gesamten Floating Action Button animiert anzeigen.
hide()Den gesamten Floating Action Button animiert ausblenden.
getState()Gibt den aktuellen Öffnungsstatus des Schnellauswahlmenüs zurück. Es gibt vier Status (opening, opened, closing, closed).

Ereignis

EreignisnameBeschreibungZielParameter
open.mdui.fabDas Ereignis wird ausgelöst, wenn die Öffnungsanimation des Schnellauswahlmenüs beginnt.<div class="mdui-fab-wrapper"></div>event._detail.inst: Instanz
opened.mdui.fabDas Ereignis wird ausgelöst, wenn die Öffnungsanimation des Schnellauswahlmenüs abgeschlossen ist.
close.mdui.fabDas Ereignis wird ausgelöst, wenn die Schließanimation des Schnellauswahlmenüs beginnt.
closed.mdui.fabDas Ereignis wird ausgelöst, wenn die Schließanimation des Schnellauswahlmenüs abgeschlossen ist.

CSS-Klassenliste

KlassennameBeschreibung
.mdui-fabDefiniert einen Floating Action Button.
.mdui-fab-miniDefiniert einen Mini-Floating Action Button.
.mdui-fab-hideBlendet den Floating Action Button animiert aus.
.mdui-fab-fixedFixiert den Floating Action Button in der unteren rechten Ecke.
.mdui-fab-wrapperDas äußere Element des Floating Action Buttons mit Schnellauswahlmenü.
.mdui-fab-openedDas Icon, zu dem der Floating Action Button nach dem Öffnen des Schnellauswahlmenüs wechselt.
.mdui-fab-dialDas äußere Element des Menüs beim Floating Action Button mit Schnellauswahlmenü.
arrow_backPrevious
Button
arrow_forwardNext
Select