ButtonIcon

Icon Buttons werden vor allem für sekundäre Aktionen verwendet.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/button-icon.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { ButtonIcon } from 'mdui/components/button-icon.js';

Beispiel:

<mdui-button-icon icon="search"></mdui-button-icon>

Verwenden Sie das Attribut selected-icon, um den Namen des Material Icons für den ausgewählten Zustand anzugeben. Sie können das Icon-Element für den ausgewählten Zustand auch über den selected-icon Slot angeben.

<mdui-button-icon selectable icon="favorite_border" selected-icon="favorite"></mdui-button-icon>
<mdui-button-icon selectable icon="favorite_border">
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-button-icon>

Quellcode

Wenn der Icon Button ausgewählt ist, wird das Attribut selected zu true. Sie können das Attribut selected hinzufügen, um den Icon Button standardmäßig auszuwählen.

<mdui-button-icon selectable selected icon="favorite_border" selected-icon="favorite"></mdui-button-icon>

Quellcode

Link

Fügen Sie das Attribut href hinzu, um den Icon Button in einen Link zu verwandeln. Sie können dann auch die Attribute download, target und rel verwenden.

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

Quellcode

Deaktivierter und Ladezustand

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

<mdui-button-icon disabled icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading disabled icon="search" variant="tonal"></mdui-button-icon>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'standard' \| 'filled' \| 'tonal' \| 'outlined'`	`'standard'`
Definiert die Icon Button-Variante. Mögliche Werte: `standard`: Für Aktionen mit niedriger Priorität. `filled`: Hat die stärkste visuelle Betonung und eignet sich gut für Aktionen mit hoher Priorität. `tonal`: Eine Zwischenform aus `filled` und `outlined` und eignet sich gut für Aktionen mittlerer bis hoher Priorität. `outlined`: Für Aktionen mittlerer Priorität oder sekundäre Aktionen.
`icon`	`icon`	`string`	-
Legt den Namen des Material Icons fest. Alternativ können Sie den Standard-Slot verwenden.
`selected-icon`	`selectedIcon`	`string`	-
Legt den Namen des Material Icons für den ausgewählten Zustand fest. Alternativ können Sie `slot="selected-icon"` verwenden.
`selectable`	`selectable`	`boolean`	`false`
Macht den Button auswählbar.
`selected`	`selected`	`boolean`	`false`
Gibt an, ob der Button ausgewählt ist.
`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.
`change`
Wird ausgelöst, wenn sich der ausgewählte Zustand ändert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.

Slots

Name
Standard
Icon-Komponente.
`selected-icon`
Icon im ausgewählten Zustand.

CSS Parts

Name
`button`
Internes `<button>`- oder `<a>`-Element.
`icon`
Icon.
`selected-icon`
Icon im ausgewählten Zustand.
`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

Button

Nächste Seite

Card

ButtonIcon

Verwendung

Beispiele

Icon

Form

Auswählbar

Link

Deaktivierter und Ladezustand

API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts

CSS Custom Property