Fab

Der Floating Action Button (FAB) hebt die primäre Aktion auf einer Seite hervor und platziert sie an einem leicht zugänglichen Ort.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/fab.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Fab } from 'mdui/components/fab.js';

Beispiel:

<mdui-fab icon="edit"></mdui-fab>

Beispiele

Symbol

Verwenden Sie das Attribut icon, um den Namen eines Material Icons-Symbols anzugeben. Sie können das Symbol-Element auch über den Slot icon angeben.

<mdui-fab icon="edit"></mdui-fab>
<mdui-fab>
  <mdui-icon slot="icon" name="edit"></mdui-icon>
</mdui-fab>

Quellcode

Erweiterter Zustand

Fügen Sie das Attribut extended hinzu, um den FAB in den erweiterten Zustand zu versetzen. Der Text im default Slot wird dann angezeigt.

Verfassen

<mdui-fab extended icon="edit">Verfassen</mdui-fab>

Quellcode

Form

Mit dem Attribut variant bestimmen Sie die Form des FAB.

<mdui-fab variant="primary" icon="edit"></mdui-fab>
<mdui-fab variant="surface" icon="edit"></mdui-fab>
<mdui-fab variant="secondary" icon="edit"></mdui-fab>
<mdui-fab variant="tertiary" icon="edit"></mdui-fab>

Quellcode

Größe

Verwenden Sie das Attribut size, um die Größe des FAB festzulegen.

<mdui-fab size="small" icon="edit"></mdui-fab>
<mdui-fab size="normal" icon="edit"></mdui-fab>
<mdui-fab size="large" icon="edit"></mdui-fab>

Quellcode

Link

Mit dem Attribut href verwandeln Sie den FAB in einen Link. Zusätzlich stehen die Attribute download, target und rel zur Verfügung.

<mdui-fab icon="edit" href="https://www.mdui.org" target="_blank"></mdui-fab>

Quellcode

Deaktivierter und Ladezustand

Fügen Sie das Attribut disabled hinzu, um den FAB zu deaktivieren. Mit dem Attribut loading wird ein Ladezustand angezeigt.

<mdui-fab disabled icon="edit"></mdui-fab>
<mdui-fab loading icon="edit"></mdui-fab>
<mdui-fab loading disabled icon="edit"></mdui-fab>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'primary' \| 'surface' \| 'secondary' \| 'tertiary'`	`'primary'`
Legt die FAB-Farbe fest. Mögliche Werte: `primary`: Verwendet die Hintergrundfarbe des primären Containers. `surface`: Verwendet die hohe Hintergrundfarbe des Oberflächencontainers. `secondary`: Verwendet die Hintergrundfarbe des sekundären Containers. `tertiary`: Verwendet die Hintergrundfarbe des tertiären Containers.
`size`	`size`	`'normal' \| 'small' \| 'large'`	`'normal'`
Legt die FAB-Größe fest. Mögliche Werte: `normal`: Normale Größe. `small`: Kleine Größe. `large`: Große Größe.
`icon`	`icon`	`string`	-
Legt den Namen des Material Icons fest. Alternativ können Sie `slot="icon"` verwenden.
`extended`	`extended`	`boolean`	`false`
Erweitert die FAB, um Text neben dem Icon anzuzeigen.
`href`	`href`	`string`	-
Die URL für den Link. Wenn gesetzt, wird die Komponente als `<a>`-Element gerendert und unterstützt Link-bezogene Attribute.
`download`	`download`	`string`	-
Lädt die verlinkte URL herunter. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Legt fest, wo die verlinkte URL geöffnet wird. Mögliche Werte: `_blank`: Öffnet in einem neuen Tab oder Fenster. `_parent`: Öffnet im übergeordneten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_self`: Öffnet im aktuellen Browsing-Kontext (Standard). `_top`: Öffnet im obersten Browsing-Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Gibt die Beziehung der verlinkten URL als durch Leerzeichen getrennte Link-Typen an. Mögliche Werte: `alternate`: Eine alternative Version des aktuellen Dokuments. `author`: Der Autor des aktuellen Dokuments oder Artikels. `bookmark`: Der Permalink des übergeordneten Abschnitts. `external`: Das referenzierte Dokument ist nicht Teil derselben Website wie das aktuelle Dokument. `help`: Ein Link zu kontextsensitiver Hilfe. `license`: Inhalt, der durch die im referenzierten Dokument beschriebene Urheberrechtslizenz abgedeckt ist. `me`: Links zu Inhalten, die dem Autor des aktuellen Dokuments gehören. `next`: Das nächste Dokument in der Serie. `nofollow`: Gibt an, dass der ursprüngliche Autor oder Herausgeber des aktuellen Dokuments das referenzierte Dokument nicht unterstützt. `noreferrer`: Verhindert das Senden des `Referer`-Headers. Hat die gleiche Wirkung wie `noopener`. `opener`: Erstellt einen neuen Browsing-Kontext, wenn der Hyperlink ansonsten in einem obersten Kontext geöffnet würde, der nicht sekundär ist (z. B. wenn `target="_blank"` angegeben ist). `prev`: Das vorherige Dokument in der Serie. `search`: Links zu einer Ressource, die verwendet werden kann, um im aktuellen Dokument und seinen verwandten Seiten zu suchen. `tag`: Markiert das aktuelle Dokument mit dem angegebenen Tag. Hinweis: Nur verfügbar, wenn `href` angegeben ist.
`autofocus`	`autofocus`	`boolean`	`false`
Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
`tabindex`	`tabIndex`	`number`	-
Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
`disabled`	`disabled`	`boolean`	`false`
Deaktiviert das Element.
`loading`	`loading`	`boolean`	`false`
Gibt an, dass sich das Element in einem Ladezustand befindet.
`name`	`name`	`string`	`''`
Der Button-Name, der mit Formulardaten übermittelt wird. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`value`	`value`	`string`	`''`
Der Button-Wert, der mit Formulardaten übermittelt wird. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Gibt die Standardaktion des Buttons an. Standard: `button`. Mögliche Werte: `submit`: Sendet die Formulardaten an den Server. `reset`: Setzt alle Steuerelemente auf ihre Anfangswerte zurück. `button`: Führt standardmäßig keine Aktion aus. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`form`	`form`	`string`	-
Verknüpft den Button mit einem `<form>`-Element. Setzen Sie dies auf die `id` eines `<form>`-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Button sein übergeordnetes `<form>`-Element, falls vorhanden. Dadurch kann der Button jedes Formular im Dokument ansprechen, nicht nur das Formular, in dem er verschachtelt ist. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist.
`formaction`	`formAction`	`string`	-
Gibt die URL an, die die vom Button übermittelten Informationen verarbeitet. Überschreibt das `action`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Gibt an, wie die Formulardaten kodiert werden sollen. Mögliche Werte: `application/x-www-form-urlencoded`: Standard, wenn das Attribut weggelassen wird. `multipart/form-data`: Wird für `<input>`-Elemente mit `type="file"` verwendet. `text/plain`: Nützlich zum Debuggen, aber nicht für die eigentliche Formularübermittlung. Überschreibt das `enctype`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Gibt die HTTP-Methode für die Formularübermittlung an. Mögliche Werte: `post`: Sendet die Formulardaten im Anforderungstext. `get`: Hängt die Formulardaten an die `action`-URL an. Überschreibt das `method`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Gibt an, dass das Formular bei der Übermittlung nicht validiert werden soll. Überschreibt das `novalidate`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Gibt an, in welchem Kontext die Antwort nach der Formularübermittlung geöffnet werden soll. Mögliche Werte: `_self`: Aktueller Browsing-Kontext (Standard). `_blank`: Neuer Tab oder Fenster. `_parent`: Öffnet im übergeordneten Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. `_top`: Öffnet im obersten Kontext oder `_self`, wenn kein übergeordneter Kontext vorhanden ist. Überschreibt das `target`-Attribut des zugehörigen Formulars des Buttons. Hinweis: Nur verfügbar, wenn `href` nicht angegeben ist und `type="submit"`.
	`validity`	`ValidityState`	-
Ein `ValidityState`-Objekt, das die Gültigkeitszustände des Elements darstellt.
	`validationMessage`	`string`	-
Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.

Methoden

Name	Parameter	Rückgabewert
`click`		`void`
Simuliert einen Mausklick auf das Element.
`focus`	`options: FocusOptions` (Optional)	`void`
Setzt den Fokus auf das Element. Der optionale Objektparameter kann eine `preventScroll`-Eigenschaft enthalten. Wenn `preventScroll` auf `true` gesetzt ist, scrollt die Seite nicht, um das fokussierte Element in den sichtbaren Bereich zu bringen.
`blur`		`void`
Entfernt den Fokus vom Element.
`checkValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst und `false` zurückgegeben. Wenn gültig, wird `true` zurückgegeben.
`reportValidity`		`boolean`
Überprüft die Gültigkeit des Formularfelds. Wenn es ungültig ist, wird ein `invalid`-Ereignis ausgelöst, `false` zurückgegeben und eine Validierungsnachricht angezeigt. Wenn gültig, wird `true` zurückgegeben.
`setCustomValidity`	`message: string`	`void`
Setzt eine benutzerdefinierte Fehlermeldung. Wenn die Nachricht nicht leer ist, wird das Feld als ungültig betrachtet.

Ereignisse

Name
`focus`
Wird ausgelöst, wenn die FAB den Fokus erhält.
`blur`
Wird ausgelöst, wenn die FAB den Fokus verliert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
Standard
Textinhalt.
`icon`
Icon.

CSS Parts

Name
`button`
Internes `<button>`- oder `<a>`-Element.
`label`
Text auf der rechten Seite.
`icon`
Icon auf der linken Seite.
`loading`
Das `<mdui-circular-progress>`-Element für den Ladezustand.

CSS Custom Property

Name
`--shape-corner-small`
Der Eckradius der Komponente bei `size="small"`. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--shape-corner-normal`
Der Eckradius der Komponente bei `size="normal"`. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
`--shape-corner-large`
Der Eckradius der Komponente bei `size="large"`. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.

Vorherige Seite

Dropdown

Nächste Seite

Icon