Chip

Die Chip-Komponente eignet sich zum Erfassen von Eingaben, zum Auswählen von Optionen, zum Filtern von Inhalten oder zum Ausführen verwandter Aktionen.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/chip.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

import type { Chip } from 'mdui/components/chip.js';

Beispiel:

Chip

<mdui-chip>Chip</mdui-chip>

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

Chip

<mdui-chip selectable selected-icon="favorite">Chip</mdui-chip>
<mdui-chip selectable>
  Chip
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-chip>

Quellcode

Wenn der Chip ausgewählt ist, wird das Attribut selected zu true. Sie können das Attribut selected auch hinzufügen, um den Chip standardmäßig ausgewählt zu haben.

Chip

<mdui-chip selectable selected>Chip</mdui-chip>

Quellcode

Löschbar

Nach dem Hinzufügen des Attributs deletable erscheint rechts auf dem Chip ein Löschsymbol. Ein Klick auf dieses Symbol löst das Ereignis delete aus. Sie können den Namen des Material Icons-Symbols für das Löschsymbol mit dem Attribut delete-icon oder das Element mit dem Slot delete-icon angeben.

Chip

<mdui-chip deletable>Chip</mdui-chip>
<mdui-chip deletable delete-icon="backspace">Chip</mdui-chip>
<mdui-chip deletable>
  Chip
  <mdui-icon slot="delete-icon" name="backspace"></mdui-icon>
</mdui-chip>

Quellcode

API

Eigenschaften

Attribut	Property	Typ	Standard
`variant`	`variant`	`'assist' \| 'filter' \| 'input' \| 'suggestion'`	`'assist'`
Definiert die Chip-Variante. Mögliche Werte: `assist`: Zeigt kontextbezogene Aktionen an, etwa Teilen oder Favorisieren auf einer Bestellseite für Mahlzeiten. `filter`: Filtert Inhalte, etwa Suchergebnisse. `input`: Stellt Benutzereingaben dar, etwa Kontakte im 'An'-Feld von Gmail. `suggestion`: Zeigt dynamische Vorschläge an, die Benutzern helfen, schneller zu handeln, etwa Nachrichtenvorschläge in einer Chat-App.
`elevated`	`elevated`	`boolean`	`false`
Fügt dem Chip einen Schatten hinzu.
`selectable`	`selectable`	`boolean`	`false`
Macht den Chip auswählbar.
`selected`	`selected`	`boolean`	`false`
Markiert den Chip als ausgewählt.
`deletable`	`deletable`	`boolean`	`false`
Macht den Chip löschbar. Wenn gesetzt, erscheint ein Lösch-Icon auf der rechten Seite.
`icon`	`icon`	`string`	-
Legt den Namen des Material Icons links fest. Alternativ können Sie `slot="icon"` verwenden.
`selected-icon`	`selectedIcon`	`string`	-
Legt den Namen des Material Icons links für den ausgewählten Zustand fest. Alternativ können Sie `slot="selected-icon"` verwenden.
`end-icon`	`endIcon`	`string`	-
Legt den Namen des Material Icons rechts fest. Alternativ können Sie `slot="end-icon"` verwenden.
`delete-icon`	`deleteIcon`	`string`	-
Legt den Namen des Material Icons für das Lösch-Icon fest, wenn der Chip löschbar ist. Alternativ können Sie `slot="delete-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 Chip den Fokus erhält.
`blur`
Wird ausgelöst, wenn der Chip den Fokus verliert.
`invalid`
Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
`change`
Wird ausgelöst, wenn sich der ausgewählte Zustand ändert.
`delete`
Wird ausgelöst, wenn das Lösch-Icon angeklickt wird.

Slots

Name
Standard
Text.
`icon`
Linkes Icon.
`end-icon`
Rechtes Icon.
`selected-icon`
Linkes Icon im ausgewählten Zustand.
`delete-icon`
Lösch-Icon, wenn löschbar.

CSS Parts

Name
`button`
Internes `<button>`- oder `<a>`-Element.
`label`
Text.
`icon`
Linkes Icon.
`end-icon`
Rechtes Icon.
`selected-icon`
Linkes Icon im ausgewählten Zustand.
`delete-icon`
Lösch-Icon auf der rechten Seite.
`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

Checkbox

Nächste Seite

CircularProgress

Chip

Verwendung

Beispiele

Form

Schatten

Symbol

Link

Deaktivierter und Ladezustand

Auswählbar

Löschbar

API

Eigenschaften

Methoden

Ereignisse

Slots

CSS Parts

CSS Custom Property