Button

Buttons dienen vor allem dazu, Aktionen auszuführen, wie z. B. das Senden einer E-Mail, das Teilen eines Dokuments oder das Liken eines Kommentars.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/button.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Button } from 'mdui/components/button.js';

Beispiel:

Button

<mdui-button>Button</mdui-button>

Beispiele

Form

Mit dem Attribut variant bestimmen Sie die Form des Buttons.

Elevated

Filled

Tonal

Outlined

Text

<mdui-button variant="elevated">Elevated</mdui-button>
<mdui-button variant="filled">Filled</mdui-button>
<mdui-button variant="tonal">Tonal</mdui-button>
<mdui-button variant="outlined">Outlined</mdui-button>
<mdui-button variant="text">Text</mdui-button>

Quellcode

Volle Breite

Mit dem Attribut full-width nimmt der Button die volle Breite des übergeordneten Elements ein.

Button

<mdui-button full-width>Button</mdui-button>

Quellcode

Symbol

Setzen Sie die Attribute icon und end-icon, um links bzw. rechts vom Button ein Material Icons-Symbol hinzuzufügen. Sie können auch über die Slots icon und end-icon Elemente hinzufügen.

Icon

Slot

<mdui-button icon="search" end-icon="arrow_forward">Icon</mdui-button>
<mdui-button>
  Slot
  <mdui-icon slot="icon" name="downloading"></mdui-icon>
  <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
</mdui-button>

Quellcode

Link

Mit dem Attribut href verwandeln Sie den Button in einen Link. Sie können dann auch die Attribute download, target und rel verwenden.

Link

<mdui-button href="https://www.mdui.org" target="_blank">Link</mdui-button>

Quellcode

Deaktivierter und Ladezustand

Mit dem Attribut disabled wird der Button deaktiviert. Mit dem Attribut loading wird ein Ladezustand angezeigt.

Deaktiviert

Laden

Laden & Deaktiviert

<mdui-button disabled>Deaktiviert</mdui-button>
<mdui-button loading>Laden</mdui-button>
<mdui-button loading disabled>Laden & Deaktiviert</mdui-button>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'elevated' \| 'filled' \| 'tonal' \| 'outlined' \| 'text'`	`'filled'`
Definiert die Button-Variante. Mögliche Werte: `elevated`: Ein Button mit einem Schatten für visuelle Betonung. `filled`: Wird für endgültige Aktionen wie 'Speichern' oder 'Bestätigen' verwendet. `tonal`: Eine Zwischenform aus `filled` und `outlined` und eignet sich gut für Aktionen mittlerer bis hoher Priorität. `outlined`: Ein umrandeter Button für Aktionen mittlerer Priorität und sekundäre Aktionen. `text`: Ein Text-Button für Aktionen mit niedriger Priorität.
`full-width`	`fullWidth`	`boolean`	`false`
Wenn gesetzt, füllt der Button die gesamte Breite seines Containers aus.
`icon`	`icon`	`string`	-
Legt den Namen des Material Icons links fest. Alternativ können Sie `slot="icon"` verwenden.
`end-icon`	`endIcon`	`string`	-
Legt den Namen des Material Icons rechts fest. Alternativ können Sie `slot="end-icon"` verwenden.
`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 der Button den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Button 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
Button-Text.
`icon`
Element auf der linken Seite des Buttons.
`end-icon`
Element auf der rechten Seite des Buttons.

CSS Parts

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

CSS Custom Property

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

Vorherige Seite

BottomAppBar

Nächste Seite

ButtonIcon