# Übersicht Beginnen Sie mit mdui über das CDN und einer einfachen Seitenvorlage. > Sie lesen gerade die Dokumentation für mdui 2! > > Für die Dokumentation von mdui 1 besuchen Sie bitte [www.mdui.org/docs/](https://www.mdui.org/docs/). ## Schnellstart {#getting-started} Der einfachste Weg, mdui zu verwenden, ist, die CSS- und JS-Dateien direkt über ein CDN einzubinden. Wenn Sie mdui über npm installieren möchten, lesen Sie bitte das Kapitel [Installation](/de/docs/2/getting-started/installation). **Dateien einbinden** Fügen Sie den folgenden Code in den ``-Bereich Ihrer Seite ein: ```html ``` Wenn Sie die Symbolattribute der Komponenten verwenden möchten (z. B. das Attribut `icon` in ``), müssen Sie auch die CSS-Datei für die Symbole einbinden. Siehe [Verwendung von Material Icons-Symbolen](/de/docs/2/components/icon#usage-material-icons). mdui ist nicht von Drittanbieter-Bibliotheken abhängig. Nach dem Einbinden der oben genannten Dateien funktioniert es wie erwartet. ## Einfachste Seitenvorlage {#template} Hier ist eine einfache Seitenvorlage, zu der Sie weitere Komponenten und Inhalte hinzufügen können, um eine Website zu erstellen. ```html Hallo Welt! Hallo Welt! ``` # Installation Sie können wählen, ob Sie mdui über npm installieren oder über ein CDN einbinden möchten. Die Installation über npm wird empfohlen. ## npm-Installation {#npm} ```bash npm install mdui --save ``` ### Vollständiger Import {#full-import} Importieren Sie die folgenden beiden Dateien in die Einstiegsdatei Ihres Projekts, um alle mdui-Komponenten verwenden zu können: ```js import 'mdui/mdui.css'; import 'mdui'; ``` Sie können auch direkt aus mdui die benötigten Funktionen importieren. Um beispielsweise die [`snackbar`](/de/docs/2/functions/snackbar)-Funktion zu importieren, können Sie Folgendes tun: ```js import { snackbar } from 'mdui'; ``` Alle Funktionen anzeigen, die aus mdui importiert werden können 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### Bedarfsgerechter Import (Cherry Picking) {#cherry-picking} Um die Projektgröße zu optimieren, können Sie nur die benötigten Komponenten und Funktionen importieren. Wenn Sie beispielsweise nur die [``](/de/docs/2/components/button)-Komponente und die [`snackbar`](/de/docs/2/functions/snackbar)-Funktion benötigen, können Sie wie folgt importieren: ```js // Die CSS-Datei muss immer importiert werden import 'mdui/mdui.css'; // Importiere die -Komponente import 'mdui/components/button.js'; // Importiere die snackbar-Funktion import { snackbar } from 'mdui/functions/snackbar.js'; ``` Auf den Dokumentationsseiten jeder Komponente oder Funktion wird detailliert beschrieben, wie der bedarfsgerechte Import durchgeführt wird. Alle Komponenten und Funktionen anzeigen, die bedarfsgerecht importiert werden können 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} Sie können mdui direkt über ein CDN mit ``- und ` Klick mich ``` ### Verwenden der ES-Module-Build-Version {#es-module} Das folgende Beispiel zeigt, wie Sie die ES-Module-Build-Version von mdui verwenden. In dieser Version können Sie mdui über ein CDN mit der ES-Modul-Syntax importieren: ```html Klick mich ``` # Quick Start Die Komponenten von mdui sind normale Web Components. Sie können mdui-Komponenten wie `
`-Tags verwenden. Die Dokumentation jeder Komponente beschreibt detailliert ihre vollständige API, einschließlich Attribute, Methoden, Ereignisse, Slots, CSS-Parts und CSS-Custom-Properties. Dieses Kapitel führt Sie in die Verwendung von Web Components ein. ## Attribute {#attribute} Attribute werden in HTML-Attribute und JavaScript-Properties unterteilt. Sie entsprechen sich normalerweise und bleiben synchron. Das heißt, wenn Sie den Wert eines HTML-Attributs ändern, wird der Wert der JavaScript-Property ebenfalls aktualisiert, und umgekehrt. HTML-Attribute können direkt im HTML-String der Komponente gesetzt und mit den Methoden `getAttribute` und `setAttribute` gelesen und geändert werden: ```html Klick mich ``` JavaScript-Properties können direkt gelesen oder gesetzt werden, indem auf die Eigenschaften der Komponenteninstanz zugegriffen wird: ```html Klick mich ``` Einige Eigenschaftswerte sind vom Typ Boolean. Wenn das HTML-Attribut für diese Eigenschaften vorhanden ist, ist die JavaScript-Property `true`, andernfalls `false`. Aus Kompatibilitätsgründen mit bestimmten Frameworks wertet mdui den String `false` jedoch auch als Boolean-Wert `false`. ```html ``` Manchmal sind Eigenschaftswerte Arrays, Objekte oder Funktionen. In diesem Fall gibt es nur die JavaScript-Property und kein entsprechendes HTML-Attribut. Beispielsweise ist die [`labelFormatter`](/de/docs/2/components/slider#attributes-labelFormatter)-Eigenschaft der [``](/de/docs/2/components/slider)-Komponente eine Funktion. Sie können diese Eigenschaft nur über JavaScript setzen: ```html ``` Im Folgenden wird ein Teil der Eigenschaftsdokumentation der [``](/de/docs/2/components/slider)-Komponente als Beispiel erläutert: | HTML-Attribut | JavaScript-Property | reflect | | --------- | ---------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | Bei dieser Komponente gibt es für die Eigenschaft `name` sowohl ein HTML-Attribut als auch eine JavaScript-Property, und die Spalte `reflect` zeigt an, dass eine Aktualisierung der JavaScript-Property das HTML-Attribut synchron aktualisiert. Bei der Eigenschaft `value` wird beim Aktualisieren der JavaScript-Property das HTML-Attribut nicht aktualisiert. Die Eigenschaft `labelFormatter` hat nur eine JavaScript-Property. ## Methoden {#method} Einige Komponenten bieten öffentliche Methoden an, die Sie aufrufen können, um verschiedene Funktionen zu implementieren. Beispielsweise kann die [`focus()`](/de/docs/2/components/text-field#methods-focus)-Methode der [``](/de/docs/2/components/text-field)-Komponente das Textfeld fokussieren. ```html ``` Sie können auf den Dokumentationsseiten der einzelnen Komponenten alle verfügbaren Methoden und deren Parameter einsehen. ## Ereignisse {#event} Einige Komponenten lösen Ereignisse aus, wenn bestimmte Aktionen ausgeführt werden. Beispielsweise löst die [``](/de/docs/2/components/dialog)-Komponente beim Öffnen das [`open`](/de/docs/2/components/dialog#events-open)-Ereignis aus. Sie können dieses Ereignis abhören, um benutzerdefinierte Aktionen auszuführen. ```html Dialog ``` Sie können auf den Dokumentationsseiten der einzelnen Komponenten alle verfügbaren Ereignisse und deren Parameter einsehen. Wenn Sie mdui in anderen Frameworks (wie Vue, React, Angular usw.) verwenden, können Sie die vom Framework bereitgestellte Syntax zum Binden von Ereignissen verwenden. Einige Frameworks (wie React) können mit ihrer Ereignisbindungssyntax jedoch nur Standardereignisse (wie `click`) binden, nicht aber benutzerdefinierte Ereignisse (wie `open`). Daher müssen Sie beim Binden benutzerdefinierter Ereignisse in React zuerst eine Referenz auf das Element erhalten und dann die `addEventListener`-Methode verwenden, um das Ereignis zu binden. Weitere Informationen zur Verwendung von mdui in React finden Sie unter [Framework-Integration - React](/de/docs/2/frameworks/react). ## Slots {#slot} Viele Komponenten bieten Slots an, um benutzerdefinierte HTML-Inhalte in die Komponente einzufügen. Der häufigste ist der Default-Slot. Es ist ein gewöhnlicher HTML- oder reiner Text innerhalb der Komponente. Beispielsweise wird der Default-Slot der [``](/de/docs/2/components/button)-Komponente verwendet, um den Text des Buttons festzulegen. Im Beispiel ist "Klick mich" der Inhalt des Default-Slots: ```html Klick mich ``` Einige Komponenten bieten auch benannte Slots an. Bei benannten Slots müssen Sie den Slot-Namen im HTML-`slot`-Attribut angeben. Im folgenden Beispiel gibt die [``](/de/docs/2/components/icon)-Komponente `slot="start"` an, was bedeutet, dass dies der benannte Slot [`start`](/de/docs/2/components/button#slots-icon) ist und dieses Symbol in den linken Bereich innerhalb der Komponente eingefügt wird: ```html Einstellungen ``` Wenn eine Komponente mehrere benannte Slots verwendet, spielt die Reihenfolge der benannten Slots keine Rolle. Solange sie sich innerhalb der Komponente befinden, platziert der Browser sie automatisch an der richtigen Stelle. Sie können auf den Dokumentationsseiten der einzelnen Komponenten alle unterstützten Slots einsehen. ## CSS-Custom-Properties {#css-custom-properties} CSS-Custom-Properties sind Variablen in CSS. mdui definiert eine Reihe von [globalen CSS-Custom-Properties](/de/docs/2/styles/design-tokens). Diese Eigenschaften werden innerhalb der Komponenten referenziert. Daher können Sie durch Ändern dieser CSS-Custom-Properties das Erscheinungsbild aller mdui-Komponenten global ändern. Der folgende Code verkleinert beispielsweise die runden Ecken aller Komponenten: ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Sie können CSS-Custom-Properties auch in einem lokalen Geltungsbereich ändern. Der folgende Code verkleinert beispielsweise die runden Ecken nur innerhalb des Elements mit der Klasse `sharp` und seinen untergeordneten Elementen: ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` Einige Komponenten bieten auch komponentenspezifische CSS-Custom-Properties an. Der Geltungsbereich dieser Eigenschaften ist auf die jeweilige Komponente beschränkt, daher enthalten sie nicht das Präfix `--mdui`. Der folgende Code ändert beispielsweise den `z-index` der [``](/de/docs/2/components/dialog)-Komponente, indem die Eigenschaft `--z-index` geändert wird: ```css mdui-dialog { --z-index: 3000; } ``` Sie können auf den Dokumentationsseiten der einzelnen Komponenten die von der Komponente unterstützten CSS-Custom-Properties einsehen. ## CSS-Parts {#css-part} mdui-Komponenten verwenden Shadow DOM, um Stile und Verhalten zu kapseln, aber reguläre CSS-Selektoren können nicht auf Elemente im Shadow DOM zugreifen. Daher fügen einige Komponenten ihren Shadow-DOM-Elementen `part`-Attribute hinzu. Sie können den `::part`-CSS-Selektor verwenden, um auf die entsprechenden Elemente zuzugreifen und Teile der Stile zu überschreiben. Der folgende Code verwendet beispielsweise den [`button`](/de/docs/2/components/button#cssParts-button)-Part, um den Innenabstand des Buttons zu ändern, und die [`label`](/de/docs/2/components/button#cssParts-label)-, [`icon`](/de/docs/2/components/button#cssParts-icon)- und [`end-icon`](/de/docs/2/components/button#cssParts-end-icon)-Parts, um die Farben von Text, linkem und rechtem Symbol zu ändern: ```html Button ``` Um die Struktur der Shadow-DOM-Elemente und die Standardstile einer Komponente zu verstehen, können Sie die Entwicklertools Ihres Browsers öffnen. Bevor Sie CSS-Parts verwenden, sollten Sie prüfen, ob die Verwendung globaler CSS-Custom-Properties und komponentenspezifischer CSS-Custom-Properties Ihren Anforderungen genügt. Wenn dies der Fall ist, sollten Sie CSS-Custom-Properties priorisieren, um das Erscheinungsbild anzupassen. Sie können auf den Dokumentationsseiten der einzelnen Komponenten alle öffentlichen `part`-Attribute der Komponente einsehen. ## Aktualisierungsmechanismus von Komponenten {#update-mechanism} mdui-Komponenten basieren auf [Lit](https://lit.dev/). Lit ist eine leichtgewichtige Bibliothek, die die Entwicklung von Web Components erleichtert. Bei der Verwendung von mdui-Komponenten müssen Sie möglicherweise deren Rendering- und Aktualisierungsmechanismus verstehen. Wenn Sie eine Eigenschaft einer mdui-Komponente ändern, wird die Komponente neu gerendert. Dieser Neu-Rendering-Prozess erfolgt jedoch nicht synchron. Wenn Sie mehrere Eigenschaftswerte gleichzeitig ändern, puffert Lit diese Änderungen bis zum nächsten Aktualisierungszyklus, um sicherzustellen, dass jede Komponente nur einmal neu gerendert wird, unabhängig davon, wie oft Sie Eigenschaftswerte ändern. Außerdem wird nur der Teil des Shadow DOM, der sich geändert hat, neu gerendert. Im folgenden Beispiel setzen wir die `disabled`-JavaScript-Property des Buttons auf `true` und fragen dann sofort sein HTML-Attribut ab. Da die Komponente zu diesem Zeitpunkt noch nicht neu gerendert wurde, ist das abgefragte HTML-Attribut immer noch `false`: ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` Um zu warten, bis das Neu-Rendering nach einer Eigenschaftsänderung abgeschlossen ist, können Sie die `updateComplete`-Eigenschaft der Komponente verwenden. Diese Eigenschaft gibt ein Promise zurück. Sobald das Promise aufgelöst ist, ist das Neu-Rendering der Komponente abgeschlossen: ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # TypeScript-Unterstützung mdui ist mit TypeScript entwickelt und bietet daher eine gute Unterstützung für TypeScript. Alle offiziellen mdui-Bibliotheken enthalten Typdeklarationsdateien und können direkt verwendet werden. ## Instanztyp der Komponente {#instance} Manchmal müssen Sie möglicherweise eine JavaScript-Variable als Instanz einer mdui-Komponente typisieren. In diesem Fall können Sie den entsprechenden Komponententyp direkt aus mdui importieren. Importieren Sie beispielsweise den Typ der Tooltip-Komponente aus der Komponentendatei: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Oder importieren Sie den Typ der Tooltip-Komponente direkt aus mdui: ```ts import type { Tooltip } from 'mdui'; ``` Dann können Sie eine JavaScript-Variable als Typ Tooltip typisieren: ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` Ihre IDE zeigt Ihnen nun automatisch die Eigenschaften und Methoden der `tooltip`-Variable an. Wenn Sie der `tooltip`-Variable einen Ereignis-Listener hinzufügen, werden Ihnen auch automatisch die Ereignisnamen, Ereignistypen und der `this`-Kontext innerhalb der Callback-Funktion angezeigt: ```ts tooltip.addEventListener('open', function (event) {}); ``` ## Ereignistypen {#event} Jede Komponente exportiert ein Interface, das die Ereignisnamen der Komponente und die entsprechenden Ereignisobjekttypen abbildet. Das Interface heißt `${Komponentenname}EventMap`. Die Tooltip-Komponente exportiert beispielsweise ein Interface namens `TooltipEventMap`: ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` Sie können dieses Interface aus der Komponentendatei importieren: ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` Oder importieren Sie dieses Interface direkt aus mdui: ```ts import type { TooltipEventMap } from 'mdui'; ``` Bitte beachten Sie, dass dieses Interface nur die komponentenspezifischen Ereignisse enthält. Da mdui-Komponenten jedoch von `HTMLElement` erben, unterstützen sie auch die Ereignisse von `HTMLElement`. Sie können einen Schnittmengentyp verwenden, um alle Ereignistypen der Komponente zu erhalten: ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # IDE-Unterstützung mdui ist speziell für VS Code und WebStorm optimiert. In diesen IDEs erhalten Sie Funktionen wie Codevervollständigung und Tooltip-Unterstützung. ## VS Code {#vscode} ### Über npm installiertes mdui {#vscode-npm} Wenn Sie mdui über npm installiert haben, können Sie die IDE-Unterstützung in VS Code für das aktuelle Projekt wie folgt aktivieren: 1. Erstellen Sie das Verzeichnis `.vscode` im Stammverzeichnis Ihres Projekts. 2. Erstellen Sie die Datei `settings.json` im Verzeichnis `.vscode`. 3. Fügen Sie den folgenden Code in die `settings.json`-Datei ein: ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` Wenn die `settings.json`-Datei bereits existiert, fügen Sie die beiden obigen Zeilen einfach in das Stammobjekt des JSON-Dokuments ein. Starten Sie VS Code nach der Änderung neu. ### Über CDN verwendetes mdui {#vscode-cdn} Wenn Sie mdui über ein CDN einbinden, können Sie die IDE-Unterstützung durch die Installation der mdui-VS-Code-Erweiterung erhalten. Suchen Sie im Erweiterungsstore von VS Code nach `mdui` und wählen Sie das erste Suchergebnis zur Installation aus, oder [klicken Sie hier, um es zu installieren](vscode:extension/zdhxiong.mdui). Nach der Installation ist die mdui-IDE-Unterstützung in allen Projekten aktiviert. Es wird empfohlen, mdui über npm zu installieren und die `settings.json`-Datei zu konfigurieren, anstatt die VS Code-Erweiterung zu installieren, um sicherzustellen, dass die IDE-Unterstützung mit der verwendeten mdui-Version übereinstimmt. ## WebStorm {#webstorm} ### Über npm installiertes mdui {#webstorm-npm} Wenn Sie mdui über npm installiert haben, können Sie die IDE-Unterstützung in WebStorm für das aktuelle Projekt wie folgt aktivieren: 1. Fügen Sie den folgenden Code in das Stammobjekt der `package.json`-Datei im Projektstammverzeichnis ein: ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` Wenn im Stammobjekt der `package.json`-Datei bereits eine `web-types`-Eigenschaft existiert, fügen Sie einfach `./node_modules/mdui/web-types.en.json` zum `web-types`-Array hinzu. Starten Sie WebStorm nach der Änderung neu. ### Über CDN verwendetes mdui {#webstorm-cdn} Wenn Sie mdui über ein CDN einbinden, können Sie die IDE-Unterstützung durch die Installation des mdui-WebStorm-Plugins erhalten. Suchen Sie im Plugin-Marktplatz von WebStorm nach `mdui` und wählen Sie das erste Suchergebnis zur Installation aus. Nach der Installation ist die mdui-IDE-Unterstützung in allen Projekten aktiviert. Es wird empfohlen, mdui über npm zu installieren, um die IDE-Unterstützung zu erhalten, anstatt das WebStorm-Plugin zu installieren, um sicherzustellen, dass die IDE-Unterstützung mit der verwendeten mdui-Version übereinstimmt. ## Unterschiede in der Unterstützung von VS Code und WebStorm {#difference} Es gibt einige Unterschiede in der Unterstützung von mdui für VS Code und WebStorm. Die folgende Tabelle listet die detaillierten Unterschiede auf: | Position mit Codevervollständigung und Tooltip | VS Code | WebStorm | | ---------------------------------------------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | | HTML-Tagnamen | | | | Attributnamen in HTML-Tags | | | | Aufzählungswerte von Attributen in HTML-Tags | | (Kommentare zu den Aufzählungswerten werden nicht angezeigt) | | Ereignisnamen in HTML-Tags | | | | `name`-Attributwerte von Slots in HTML | | | | `part`-Attributnamen des `::part()`-Selektors in CSS | | | | Namen von CSS-Custom-Properties innerhalb von Komponenten in CSS | | | | Namen globaler CSS-Custom-Properties in CSS | | | | Globale Klassennamen in CSS | | | # Lokalisierung mdui verwendet standardmäßig intern Englisch. Wenn Sie eine andere Sprache verwenden möchten, müssen Sie eine Mehrsprachenkonfiguration vornehmen. ## Verwendung {#usage} mdui bietet drei Funktionen für die Mehrsprachenunterstützung: - [`loadLocale`](/de/docs/2/functions/loadLocale): Lädt ein Sprachpaket. Das Argument ist eine Funktion, die einen Sprachcode als Parameter erhält und ein Promise zurückgibt. Wenn das Sprachpaket geladen ist, wird das Promise mit dem entsprechenden Sprachpaket aufgelöst. Stellen Sie sicher, dass Sie diese Funktion in der Einstiegsdatei Ihres Projekts aufrufen. - [`setLocale`](/de/docs/2/functions/setLocale): Wechselt zu einer bestimmten Sprache. Das Argument ist der neue Sprachcode. Der Rückgabewert ist ein Promise, das aufgelöst wird, sobald das neue Sprachpaket geladen ist. - [`getLocale`](/de/docs/2/functions/getLocale): Gibt den aktuellen Sprachcode zurück. Ein Beispiel: ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // Rufen Sie loadLocale am Projekteinstiegspunkt auf, um Sprachpakete zu laden loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // Rufen Sie diese Funktion auf, wenn Sie die Sprache wechseln möchten. Nachdem das Promise aufgelöst ist, ist der Sprachwechsel abgeschlossen. setLocale('zh-cn').then(() => { // Ein Aufruf von getLocale gibt den aktuellen Sprachcode zurück console.log(getLocale()); // zh-cn }); ``` ## Zustandsereignisse {#event} Zu Beginn, am Ende oder bei einem Fehler des Sprachwechsels wird das `mdui-localize-status`-Ereignis auf dem `window` ausgelöst. Sie können dieses Ereignis abhören, um benutzerdefinierte Aktionen auszuführen, z. B. das Schreiben des Sprachcodes in ein Cookie nach erfolgreichem Sprachwechsel. Die `detail.status`-Eigenschaft des Ereignisses beschreibt, welche Zustandsänderung stattgefunden hat. Mögliche Werte sind: `loading`, `ready`, `error`:
detail.status Beschreibung
loading

Das Laden eines neuen Sprachpakets beginnt.

Das detail-Objekt enthält:

  • loadingLocale: Der Sprachcode der neu zu ladenden Sprache.
ready

Das neue Sprachpaket wurde erfolgreich geladen.

Das detail-Objekt enthält:

  • readyLocale: Der Sprachcode der neu geladenen Sprache.
error

Das Laden des neuen Sprachpakets ist fehlgeschlagen.

Das detail-Objekt enthält:

  • errorLocale: Der Sprachcode der Sprache, die nicht geladen werden konnte.
  • errorMessage: Die Fehlermeldung beim Laden.
Ein Beispiel: ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `Beginne mit dem Laden des neuen Sprachpakets: ${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log( `Neues Sprachpaket ${event.detail.readyLocale} erfolgreich geladen`, ); } else if (event.detail.status === 'error') { console.error( `Neues Sprachpaket ${event.detail.errorLocale} konnte nicht geladen werden: ${event.detail.errorMessage}`, ); } }); ``` ## Methoden zum Laden von Sprachpaketen {#load-locale} ### Lazy Loading {#lazy-load} Die Verwendung von [dynamischen Importen](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/import) ermöglicht es, das entsprechende Sprachpaket erst beim Wechsel zu dieser Sprache herunterzuladen. Dies ist die empfohlene Methode. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### Preloading {#pre-load} Laden Sie alle benötigten Sprachpakete herunter, während die Seite geladen wird. Dadurch ist kein weiterer Download beim Sprachwechsel erforderlich, was den Sprachwechsel beschleunigt. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### Statische Importe {#static-imports} Mit dieser Methode können Sie alle benötigten Sprachpakete zusammen mit Ihrem Projektcode in dieselbe Datei bündeln, sodass kein separater Download von Sprachpaketen mehr erforderlich ist. ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## Sprachpakete über ein CDN laden {#cdn} Wenn Sie mdui über ein CDN verwenden, können Sie Sprachpakete direkt über das CDN laden. Ein Beispiel: ```html ``` ## Unterstützte Sprachen {#languages} Derzeit unterstützt mdui die folgenden Sprachen: | Sprache | Sprachcode | | ------------------------------------ | ---------- | | Arabisch | ar-eg | | Aserbaidschanisch | az-az | | Bulgarisch | bg-bg | | Bengalisch (Bangladesch) | bn-bd | | Weißrussisch | be-by | | Katalanisch | ca-es | | Tschechisch | cs-cz | | Dänisch | da-dk | | Deutsch | de-de | | Griechisch | el-gr | | Englisch | en-gb | | Englisch (US) | en-us | | Spanisch | es-es | | Estnisch | et-ee | | Persisch | fa-ir | | Finnisch | fi-fi | | Französisch (Belgien) | fr-be | | Französisch (Kanada) | fr-ca | | Französisch (Frankreich) | fr-fr | | Irisch | ga-ie | | Galicisch (Spanien) | gl-es | | Hebräisch | he-il | | Hindi | hi-in | | Kroatisch | hr-hr | | Ungarisch | hu-hu | | Armenisch | hy-am | | Indonesisch | id-id | | Italienisch | it-it | | Isländisch | is-is | | Japanisch | ja-jp | | Georgisch | ka-ge | | Khmer | km-kh | | Nordkurdisch | kmr-iq | | Kannada | kn-in | | Kasachisch | kk-kz | | Koreanisch | ko-kr | | Litauisch | lt-lt | | Lettisch | lv-lv | | Mazedonisch | mk-mk | | Malayalam | ml-in | | Mongolisch | mn-mn | | Malaiisch (Malaysia) | ms-my | | Norwegisch | nb-no | | Nepalesisch | ne-np | | Niederländisch (Belgien) | nl-be | | Niederländisch | nl-nl | | Polnisch | pl-pl | | Portugiesisch (Brasilien) | pt-br | | Portugiesisch | pt-pt | | Rumänisch | ro-ro | | Russisch | ru-ru | | Slowakisch | sk-sk | | Serbisch | sr-rs | | Slowenisch | sl-si | | Schwedisch | sv-se | | Tamilisch | ta-in | | Thailändisch | th-th | | Türkisch | tr-tr | | Urdu (Pakistan) | ur-pk | | Ukrainisch | uk-ua | | Vietnamesisch | vi-vn | | Vereinfachtes Chinesisch | zh-cn | | Traditionelles Chinesisch (Hongkong) | zh-hk | | Traditionelles Chinesisch (Taiwan) | zh-tw | ## Neue Übersetzungen einreichen {#contribute} Um neue Übersetzungen beizutragen oder bestehende Übersetzungen zu verbessern, reichen Sie bitte einen Pull Request auf Github ein. Die Sprachpakete befinden sich unter [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff). Sie können sie direkt auf Github bearbeiten. # Häufig gestellte Fragen (FAQ) Im Folgenden sind einige häufig gestellte Fragen und offizielle Antworten aus der mdui-Community aufgeführt. Bevor Sie eine Frage stellen, sollten Sie suchen, ob es ähnliche Probleme gibt. ## Warum wird die Komponente nicht angezeigt, wenn ich ein selbstschließendes Tag verwende? {#no-self-closing} mdui basiert auf Web Components. Die Web Components-Spezifikation unterstützt keine selbstschließenden Tags. Stellen Sie daher sicher, dass Sie für mdui-Komponenten ein End-Tag verwenden. ```html ``` ## Wie kann ich Komponenten ausblenden, bevor sie geladen sind? {#waiting-load} Da mdui-Komponenten über JavaScript registriert werden, können sie vor dem Laden der JS-Datei und der Registrierung der Komponente vorübergehend ungestylt erscheinen. Die folgenden beiden Methoden lösen dieses Problem: Eine Methode ist die Verwendung der CSS-Pseudoklasse [`:defined`](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Selectors/:defined), um nicht registrierte mdui-Komponenten auszublenden. Das folgende CSS blendet alle nicht registrierten mdui-Komponenten aus und zeigt sie sofort an, sobald sie registriert sind: ```css :not(:defined) { visibility: hidden; } ``` Eine andere Methode ist die Verwendung der JavaScript-Methode [`customElements.whenDefined()`](https://developer.mozilla.org/de/docs/Web/API/CustomElementRegistry/whenDefined). Diese Methode gibt ein Promise zurück, das aufgelöst wird, sobald die angegebene Komponente registriert ist. Für den Fall, dass einige Komponenten aus bestimmten Gründen nicht geladen werden können, können Sie [`Promise.allSettled()`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) verwenden. Das folgende Beispiel blendet zunächst das `` mit `opacity: 0` aus und blendet die Seite dann ein, sobald die Komponenten registriert sind. Es verwendet `Promise.allSettled()`, um auf alle Promises zu warten, sodass die Seite auch dann angezeigt wird, wenn eine Komponente nicht geladen werden kann: ```html ``` # LLMs.txt mdui bietet `llms.txt` und `llms-full.txt` an, um LLMs (Large Language Models) einen genauen und zitierfähigen Kontext zu liefern und so zuverlässigere Antworten auf Fragen zu mdui zu ermöglichen. ## Verwenden Sie llms.txt, um LLMs Kontext zu bieten {#context} Zwei Einstiegspunkte: - `llms.txt`: https://www.mdui.org/de/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/de/docs/2/llms-full.txt `llms.txt` ist ein präziser Index, der sich für Modelle mit Internetzugang eignet, um die benötigten Markdown-Seiten abzurufen oder einen Projektüberblick zu geben. `llms-full.txt` enthält den vollständigen Kontext, einschließlich aller Inhalte aus `llms.txt`. Er eignet sich für Modelle ohne Internetzugang oder wenn der vollständige Kontext auf einmal bereitgestellt werden muss. ## Markdown-Version der Dokumentation {#md-mirror} Für jede Dokumentationsseite gibt es eine entsprechende Markdown-Version: Hängen Sie einfach `.md` an die Seiten-URL an (für die Startseite hängen Sie `index.md` an). Beispiel: https://www.mdui.org/de/docs/2/components/button → https://www.mdui.org/de/docs/2/components/button.md https://www.mdui.org/de/docs/2/ → https://www.mdui.org/de/docs/2/index.md Sie können diesen Markdown-Link oder seinen Klartext direkt als Kontext verwenden, um fokussiertere und genauere Antworten zu erhalten. ## Wie verwende ich es in ChatGPT, Claude und anderen LLMs? {#how-to-use} Je nachdem, ob das Modell Internetzugang/Datei-Upload unterstützt, wählen Sie eine der folgenden Methoden oder eine Kombination davon: 1. Direkt einfügen: Fügen Sie den Inhalt von `llms-full.txt` als Systemaufforderung oder erste Nachricht ein. Beispiel: "Im Folgenden finden Sie den Kontext für mdui. Bitte beantworten Sie alle folgenden Fragen ausschließlich auf dieser Grundlage; halten Sie sich strikt an diesen Kontext, falls es Abweichungen gibt:\n\n[Fügen Sie hier den Inhalt von llms-full.txt ein]". 2. Datei hochladen: Laden Sie die Datei `llms-full.txt` (oder `llms.txt`) hoch und geben Sie in der ersten Nachricht an: "Verwende den Anhang als primären Kontext". Beispiel: "Basierend auf der angehängten mdui-Dokumentation, geben Sie die Verwendung und häufige Fallstricke von `` an". 3. Online lesen: Geben Sie im Dialog den Link zu `llms.txt` oder `llms-full.txt` an. Beispiel: "Bitte lesen Sie https://www.mdui.org/de/docs/2/llms-full.txt und folgen Sie diesem als Kontext, um meine Fragen zu mdui zu beantworten". 4. Auf eine bestimmte Seite verweisen: Wenn Sie nur eine bestimmte Komponente/Funktion besprechen möchten, geben Sie direkt die Markdown-Adresse der Seite an. Beispiel: "Bitte lesen Sie https://www.mdui.org/de/docs/2/components/button.md und geben Sie basierend auf diesem Dokument drei Best Practices an". **Hinweis**: Klicken Sie auf das Symbol oben rechts auf der Seite, um den obigen Link zu kopieren, die Markdown-Version der aktuellen Seite zu öffnen oder die aktuelle Seite oder `llms-full.txt` als Kontext in ChatGPT zu öffnen. # MCP-Server mdui bietet einen dedizierten [MCP (Model Context Protocol)](https://modelcontextprotocol.io/)-Server `@mdui/mcp` an, um KI-Agenten lokal Abfragefähigkeiten für Komponenten, Symbole, CSS Custom Properties und Dokumentation bereitzustellen. Er kann mit Entwicklungswerkzeugen wie Claude Code, Cursor und GitHub Copilot zusammenarbeiten, um die Codegenerierung zu unterstützen und die Verwendung von mdui-Komponenten und -Stilen zu verbessern. ## Werkzeuge {#tools} Der MCP-Server von mdui stellt KI-Agenten die folgenden Werkzeuge zur Verfügung: - `list_components`: Listet alle mdui-Komponenten auf. - `get_component_metadata`: Ruft detaillierte API-Metadaten für eine einzelne Komponente ab. - `list_css_classes`: Listet globale CSS-Klassennamen auf. - `list_css_variables`: Listet globale CSS Custom Properties auf. - `list_documents`: Listet alle Dokumente auf. - `get_document`: Ruft den vollständigen Inhalt eines einzelnen Dokuments ab. - `list_icon_codes`: Listet Symbolcodes auf, die für Attribute oder APIs verwendet werden können. - `list_icon_components`: Listet eigenständige Symbolkomponenten und ihre ESM-Importanweisungen auf. ## Verwendung {#usage} Der MCP-Server unterstützt nur die [stdio-Übertragung](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) und kann direkt in Clients wie VS Code, Cursor, Claude Code, Windsurf, Zed sowie in KI-Agenten, die das stdio-Protokoll unterstützen, verwendet werden. ### VS Code {#vscode} > Stellen Sie sicher, dass die Erweiterungen [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) und [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) installiert sind. 1. Erstellen Sie die Datei `.vscode/mcp.json` im Stammverzeichnis Ihres Projekts und fügen Sie die folgende Konfiguration hinzu: ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Klicken Sie auf die Schaltfläche "Start" in der Datei `mcp.json`. 3. Beginnen Sie den Dialog in GitHub Copilot Chat. ### Cursor {#cursor} 1. Erstellen oder bearbeiten Sie die Datei `.cursor/mcp.json` im Stammverzeichnis Ihres Projekts und fügen Sie die folgende Konfiguration hinzu: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Gehen Sie zu Settings > Cursor Settings > MCP & Integrations und aktivieren Sie den mdui-Server. 3. Beginnen Sie den Dialog in Cursor Chat. ### Claude Code {#claude-code} 1. Führen Sie den folgenden Befehl im Terminal aus, um den mdui MCP-Server hinzuzufügen: ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. Führen Sie anschließend `claude` aus, um eine Sitzung zu starten. 3. Beginnen Sie mit der Eingabe von Prompts. ### Windsurf {#windsurf} 1. Gehen Sie zu Settings > Windsurf Settings > Cascade 2. Klicken Sie auf Manage MCPs und dann auf "View raw config". Fügen Sie der Konfigurationsdatei Folgendes hinzu: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > Wenn der MCP-Server nicht automatisch angezeigt wird, klicken Sie auf Refresh, um die Liste zu aktualisieren. 3. Beginnen Sie mit der Eingabe von Prompts. ### Zed {#zed} 1. Öffnen Sie Settings > Open Settings und fügen Sie die folgende Konfiguration zur Datei `settings.json` hinzu: ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Beginnen Sie mit der Eingabe von Prompts. ### Benutzerdefinierter MCP-Client {#custom} Wenn Sie einen benutzerdefinierten MCP-Client in einer lokalen oder Entwicklungsumgebung verwenden, fügen Sie diesen Server einfach zur Konfigurationsdatei des Clients hinzu. Beispiel: ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # Dark Mode Alle Komponenten von mdui unterstützen den Dark Mode und passen das Theme automatisch an die Betriebssystemeinstellungen an. Sie können jederzeit auf das -Symbol oben rechts auf der Dokumentationsseite klicken, um das Theme umzuschalten und die Anzeige der verschiedenen Komponenten in verschiedenen Themes zu sehen. Um den Dark Mode zu verwenden, fügen Sie einfach die Klasse `mdui-theme-dark` zum ``-Tag hinzu: ```html ``` Wenn das Theme automatisch basierend auf den Betriebssystemeinstellungen umschalten soll, fügen Sie einfach die Klasse `mdui-theme-auto` zum ``-Tag hinzu: ```html ``` Sie können auch in verschiedenen Teilen der Seite unterschiedliche Themes verwenden. Im folgenden Beispiel wird beispielsweise der Dark Mode auf dem `` eingestellt, aber einem `
` auf der Seite wird die Klasse `mdui-theme-light` hinzugefügt, sodass die Elemente in diesem div den Light Mode anzeigen, während der Rest der Seite den Dark Mode hat: ```html
``` Neben dem direkten Hinzufügen von CSS-Klassen bietet mdui auch zwei Funktionen für die bequemere Bedienung des Themes an: - [`getTheme`](/de/docs/2/functions/getTheme): Ruft das Theme der aktuellen Seite oder eines angegebenen Elements ab. - [`setTheme`](/de/docs/2/functions/setTheme): Setzt das Theme der aktuellen Seite oder eines angegebenen Elements. --- Es ist wichtig zu beachten, dass mdui die Stile `color` und `background-color` auf den Selektoren `:root`, `.mdui-theme-light`, `.mdui-theme-dark` und `.mdui-theme-auto` setzt. Wenn Ihnen diese Standardstile nicht gefallen, können Sie sie selbst überschreiben. Das folgende Beispiel setzt den Seitenhintergrund im Light Mode auf reinweiß und die Textfarbe auf schwarz; im Dark Mode setzt es den Seitenhintergrund auf schwarz und die Textfarbe auf weiß: ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # Dynamic Color mdui bietet eine Dynamic Color-Funktionalität. Geben Sie einfach einen Farbwert an, und mdui generiert automatisch ein vollständiges Farbschema. Darüber hinaus unterstützt mdui das Extrahieren der Hauptfarbe aus einem angegebenen Hintergrundbild und die Generierung eines Farbschemas daraus. Sie können jederzeit auf das Symbol oben rechts auf der Dokumentationsseite klicken, um das Farbschema umzuschalten und die Anzeige der verschiedenen Komponenten in verschiedenen Farbschemata zu sehen. Ein Farbschema besteht im Kern aus einer Reihe von CSS-Custom-Properties. Die Farbwerte in mdui-Komponenten referenzieren alle diese Reihe von CSS-Custom-Properties, sodass das Farbschema aller Komponenten auf einmal aktualisiert werden kann. Eine vollständige Liste der CSS-Custom-Properties finden Sie unter [Design-Tokens - Farben](/de/docs/2/styles/design-tokens#color). ## Generieren eines Farbschemas {#color-scheme} Sie können die Funktion [`setColorScheme`](/de/docs/2/functions/setColorScheme) verwenden, um ein Farbschema zu generieren. Diese Funktion akzeptiert einen hexadezimalen Farbwert, generiert ein Farbschema und setzt das ``-Element der Seite auf dieses Farbschema. Zum Beispiel: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Generiert ein Farbschema basierend auf #0061a4 und setzt auf dieses Farbschema setColorScheme('#0061a4'); ``` Sie können auch das Attribut `target` im zweiten Argument angeben, um festzulegen, auf welchem Element das Farbschema gesetzt werden soll. Zum Beispiel: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Generiert ein Farbschema basierend auf #0061a4 und setzt das .foo-Element auf dieses Farbschema setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` Standardmäßig enthält das generierte Farbschema nur die unter [Design-Tokens - Farben](/de/docs/2/styles/design-tokens#color) aufgeführten Farben. Sie können das Attribut `customColors` im zweiten Argument angeben, um basierend auf den von Ihnen angegebenen benutzerdefinierten Farbnamen und Farbwerten eine Reihe von benutzerdefinierten Farbgruppen zu generieren. Zum Beispiel: ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // Generiert ein Farbschema basierend auf #0061a4, ändert den Wert der vorhandenen error-Farbgruppe und fügt eine neue music-Farbgruppe hinzu setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` Eine benutzerdefinierte Farbgruppe enthält vier CSS-Custom-Properties: - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` `{name}` ist der Name der benutzerdefinierten Farbe, den Sie in `customColors` angegeben haben. Ein benutzerdefinierter Farbname kann ein bereits im Standard-Farbschema vorhandener Farbname sein, wie `primary`, `secondary`, `tertiary`, `error`. Wenn Sie diese Werte als benutzerdefinierte Farbnamen angeben, werden die entsprechenden vier CSS-Custom-Properties im generierten Farbschema mit den von Ihnen angegebenen Farbwerten generiert. Im obigen Beispiel wird beispielsweise ein benutzerdefinierter Farbname `error` angegeben. Da `error` ein bereits im Standard-Farbschema vorhandener Farbname ist und die entsprechende CSS-Custom-Property von mdui-Komponenten zur Darstellung von Fehlerzuständen verwendet wird, werden die Fehlerzustände in mdui-Komponenten nun ebenfalls grün, da der Farbwert auf einen grünen Wert gesetzt ist. Ein benutzerdefinierter Farbname kann auch ein neu hinzugefügter sein, wie `music` im obigen Beispiel. Da dieser im Standard-Farbschema nicht vorhanden ist, enthält das generierte Farbschema zusätzlich vier CSS-Custom-Properties. Sie können diese CSS-Custom-Properties in Ihren eigenen Stilen referenzieren: ```html
Music
Music Container
``` Sie können auch die Funktion [`removeColorScheme`](/de/docs/2/functions/removeColorScheme) verwenden, um ein mit der obigen Methode generiertes Farbschema zu entfernen. Sie können einen Parameter angeben, um festzulegen, von welchem Element das Farbschema entfernt werden soll. Standardmäßig entfernt es das Farbschema von ``. ## Extrahieren einer Farbe aus einem Hintergrundbild {#from-wallpaper} mdui bietet die Funktion [`getColorFromImage`](/de/docs/2/functions/getColorFromImage), um die Hauptfarbe aus einer gegebenen `Image`-Instanz zu extrahieren. Diese Funktion gibt ein Promise zurück. Der aufgelöst-Wert des Promise ist der extrahierte hexadezimale Farbwert. Sie können den mit dieser Funktion erhaltenen Farbwert verwenden und dann die oben beschriebene Funktion [`setColorScheme`](/de/docs/2/functions/setColorScheme) aufrufen, um das Farbschema festzulegen. Zum Beispiel: ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # Typografie mdui bietet die CSS-Klassen `mdui-prose` und `mdui-table`, die speziell für die Optimierung des Stils von Artikeln und Tabellen entwickelt wurden. ## Artikel-Typografie {#prose} Sie können die Klasse `mdui-prose` zum übergeordneten Element eines Artikels hinzufügen, um den Anzeigestil des gesamten Artikels zu optimieren, einschließlich des Stils von Tabellen (``) im Artikel. Zum Beispiel: ```html

Überschrift

Fließtext

``` ## Tabellenstil {#table} Durch Hinzufügen der Klasse `mdui-table` zu einem ``-Element wird der Anzeigestil der Tabelle optimiert. Zum Beispiel: ```html
``` Wenn Sie möchten, dass die Tabelle innerhalb ihres übergeordneten Elements horizontal scrollbar ist, können Sie die Klasse `mdui-table` zum übergeordneten Element des ``-Elements hinzufügen. Zum Beispiel: ```html
``` # Design-Tokens Design-Tokens sind eine Strategie zur Verwaltung von Designsystemen. Sie abstrahieren alle wiederverwendbaren Elemente in einem Designsystem (wie Farben, Schriftarten, Abstände usw.) in eigenständige Variablen, um eine einheitliche Verwaltung und Anwendung im gesamten Designsystem zu ermöglichen. mdui verwendet globale CSS-Custom-Properties zur Implementierung von Design-Tokens. Wenn Sie diese CSS-Custom-Properties ändern, passt sich das Erscheinungsbild aller mdui-Komponenten global an. Gleichzeitig wird auch für Ihre eigenen Stile empfohlen, vorrangig CSS-Custom-Properties zu referenzieren, um sicherzustellen, dass Ihre Stile mit denen der mdui-Komponenten übereinstimmen. Darüber hinaus werden Ihre eigenen Stile beim Ändern des dynamischen Farbschemas automatisch aktualisiert. ## Farben {#color} mdui bietet eine Reihe von CSS-Custom-Properties für den Light Mode und den Dark Mode. Im Light Mode heißen die CSS-Custom-Properties `--mdui-color-{name}-light`, wobei `{name}` der Farbname ist; im Dark Mode heißen sie `--mdui-color-{name}-dark`. Darüber hinaus bietet mdui eine Reihe von CSS-Custom-Properties namens `--mdui-color-{name}`. Diese Eigenschaft referenziert im Light Mode `--mdui-color-{name}-light` und im Dark Mode `--mdui-color-{name}-dark` und kann daher die Farbe automatisch basierend auf Light Mode und Dark Mode umschalten. Wenn Sie die CSS-Custom-Properties einiger Farben ändern möchten, müssen Sie sowohl `--mdui-color-{name}-light` als auch `--mdui-color-{name}-dark` ändern. Wenn Sie die CSS-Custom-Properties auslesen, verwenden Sie einfach die Eigenschaft `--mdui-color-{name}`. Die Werte der CSS-Custom-Properties sind die drei RGB-Farben, getrennt durch `,`. Das folgende Beispiel zeigt die Verwendung der CSS-Custom-Properties für Farben: ```css /* Ändern des Farbwerts von primary */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* Die Hintergrundfarbe des foo-Elements auf primary setzen */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* Die Hintergrundfarbe des bar-Elements auf primary mit 0.8 Deckkraft setzen */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` Wenn Sie ein völlig neues Farbschema erstellen möchten, wird die Verwendung der Funktion [`setColorScheme`](/de/docs/2/functions/setColorScheme) empfohlen. Diese Funktion generiert basierend auf einem von Ihnen angegebenen Farbwert ein vollständiges Farbschema.
Farbname CSS-Custom-Property Standardwert Beispiel
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## Abgerundete Ecken (Shape Corner) {#shape-corner} mdui bietet 7 verschiedene Größen für abgerundete Ecken. Das folgende Beispiel zeigt, wie Sie diese CSS-Custom-Properties für abgerundete Ecken verwenden: ```css /* Ändern der Größe der extra-small-Ecke */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* Die Eckenabrundung des foo-Elements auf extra-small setzen */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS-Custom-Property | Standardwert | Beispiel | | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## Typografie (Typescale) {#typescale} mdui bietet 15 verschiedene Textstile, darunter Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small. Hier ist ein Beispiel: ```css /* Ändern des Textstils Body large */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* Den Textstil des foo-Elements auf Body large setzen */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS-Custom-Property Standardwert Beispiel
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## Deckkraft der Zustandsschicht (State Layer) {#state-layer} Einige mdui-Komponenten fügen bei Interaktion eine halbtransparente Überlagerung hinzu. Beispielsweise fügt die [``](/de/docs/2/components/button)-Komponente beim Hovern, Fokussieren, Drücken oder Ziehen eine halbtransparente Überlagerung hinzu. Sie können die Deckkraft dieser Überlagerungen anpassen, indem Sie die CSS-Custom-Properties ändern. Hier ist ein Beispiel: ```css /* Ändern der Deckkraft der Zustandsschicht */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS-Custom-Property | Standardwert | Beispiel | | ---------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## Höhe (Schatten) (Elevation) {#elevation} Einige mdui-Komponenten haben Schatteneffekte, um ein Gefühl der Höhe auf der Seite zu simulieren. Sie können die Schatteneffekte der Komponenten anpassen, indem Sie die CSS-Custom-Properties ändern. Hier ist ein Beispiel: ```css /* Ändern des Schattens der Stufe level1 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* Den Schatten des foo-Elements auf level1 setzen */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS-Custom-Property | Standardwert | Beispiel | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## Animation (Motion) {#motion} Die Beschleunigungskurven und Dauern von Animationen in mdui-Komponenten können über CSS-Custom-Properties konfiguriert werden. Hier ist ein Beispiel: ```css /* Ändern der standard Beschleunigungskurve und der Dauer short1 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* Den Übergangseffekt des foo-Elements auf die standard Beschleunigungskurve und die Dauer short1 setzen */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
Typ CSS-Custom-Property Standardwert
Beschleunigungskurve --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
Dauer --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## Responsive Breakpoints {#breakpoint} mdui bietet eine Reihe von responsiven Breakpoints, die über CSS-Custom-Properties konfiguriert werden können. Hier ist ein Beispiel: ```css /* Ändern des Breakpoint-Werts von sm */ :root { --mdui-breakpoint-sm: 560px; } ``` Es ist wichtig zu beachten, dass diese CSS-Custom-Properties nicht in CSS-Medienabfragen verwendet werden können. Das folgende ist ein Beispiel für eine falsche Verwendung: ```css /* Falsche Verwendung. CSS-Custom-Properties können nicht in Medienabfragen verwendet werden */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` Wenn Sie Breakpoint-Prüfungen in JavaScript durchführen müssen, verwenden Sie die Funktion [`breakpoint`](/de/docs/2/functions/breakpoint). | CSS-Custom-Property | Standardwert | | ----------------------- | ------------ | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # Integration mit React Um mdui in React zu verwenden, befolgen Sie einfach die Schritte auf der [Installationsseite](/de/docs/2/getting-started/installation#npm). ## Hinweise {#notes} Bei der Verwendung von mdui in React gibt es einige Einschränkungen. Diese Einschränkungen sind allgemeine Einschränkungen bei der Verwendung von Web Components in React und keine spezifischen Einschränkungen der mdui-Komponentenbibliothek. ### Event-Bindung {#event-binding} Da React benutzerdefinierte Ereignisse nicht unterstützt, müssen Sie beim Verwenden der von mdui-Komponenten bereitgestellten Ereignisse zuerst eine Referenz auf die Komponente mit dem Attribut `ref` erhalten. Hier ist ein Beispiel für die Verwendung von mdui-Komponentenereignissen in React: ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('switch wurde umgeschaltet'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### JSX TypeScript-Typdeklaration {#jsx-typescript} Wenn Sie mdui in einer TypeScript-Datei (.tsx) verwenden, müssen Sie eine TypeScript-Typdeklaration hinzufügen. Sie müssen die Typdeklarationsdatei von mdui manuell in die .d.ts-Datei Ihres Projekts importieren: ```ts /// ``` # Integration mit Vue Um mdui in Vue zu verwenden, müssen Sie zuerst die [Installation](/de/docs/2/getting-started/installation#npm) wie auf der Installationsseite beschrieben abschließen und dann einige notwendige Konfigurationen vornehmen. ## Konfiguration {#configuration} Sie müssen Vue so konfigurieren, dass mdui-Komponenten nicht als Vue-Komponenten geparst werden. In der Datei `vite.config` setzen Sie die Option `compilerOptions.isCustomElement`: ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // Alle Tag-Namen, die mit mdui- beginnen, sind mdui-Komponenten isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` Weitere Informationen zu dieser Konfiguration finden Sie in der [Vue-Dokumentation](https://de.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue). ## Hinweise {#notes} ### Zwei-Wege-Datenbindung {#data-binding} Sie können `v-model` nicht für die Zwei-Wege-Datenbindung mit mdui-Komponenten verwenden. Sie müssen die Datenbindung und -aktualisierung selbst handhaben. Zum Beispiel: ```html ``` ### eslint-Konfiguration {#eslint} Wenn Sie [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue) verwenden, müssen Sie die folgende Regel in Ihrer `.eslintrc.js` hinzufügen: ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Integration mit Angular Um mdui in Angular zu verwenden, müssen Sie zuerst die [Installation](/de/docs/2/getting-started/installation#npm) wie auf der Installationsseite beschrieben abschließen und dann einige notwendige Konfigurationen vornehmen. ## Konfiguration {#configuration} Zuerst müssen wir die Unterstützung für Web Components in Angular aktivieren. Beispiel: ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` Nach der Konfiguration können wir die mdui-Komponenten in den Angular-Komponentencode importieren und verwenden: ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Dialog-Inhalt
` }) export class DialogExampleComponent implements OnInit { // Verwenden Sie @ViewChild, um eine Referenz auf das #dialog-Element zu erhalten @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // Verwenden Sie nativeElement, um auf die mdui-Komponente zuzugreifen this.dialog?.nativeElement.open = true; } } ``` # Integration mit anderen Frameworks mdui basiert auf nativ vom Browser unterstützten Web Components und kann daher in allen Web-Frameworks verwendet werden. Im Folgenden sind die Methoden zur Verwendung von mdui in einigen gängigen Frameworks aufgeführt. ## Aurelia {#Aurelia} Nachdem Sie die [Installation](/de/docs/2/getting-started/installation#npm) wie auf der Installationsseite beschrieben abgeschlossen haben, müssen Sie ein zusätzliches Paket installieren und konfigurieren (nur für Aurelia 2): ```bash npm install aurelia-mdui --save ``` Registrieren Sie es dann in Ihrer Anwendung: ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **Hinweis** Bitte senden Sie Fehlerberichte an [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui). ## WebCell {#WebCell} Wenn Sie mdui in [WebCell](https://web-cell.dev/) verwenden, folgen Sie einfach den Schritten auf der [Installationsseite](/de/docs/2/getting-started/installation#npm). Web Components-, TypeScript- und JSX-Unterstützung sind direkt integriert und sofort einsatzbereit. Alternativ können Sie das [offizielle GitHub-Vorlagen-Repository](https://github.com/EasyWebApp/WebCell-mobile) verwenden, um [mit einem Klick ein neues Projekt zu erstellen](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp). # Avatar-Komponente Avatare stellen eine Person oder ein Objekt dar. Sie unterstützen verschiedene Formen, darunter Bilder, Symbole oder Zeichen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/avatar.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Bild-Avatar {#example-src} Mit dem Attribut `src` legen Sie einen Bildlink als Avatar fest oder stellen im default Slot ein ``-Element als Avatar bereit. ```html Beispiel für Bild-Avatar ``` Sie können mit dem Attribut `fit` festlegen, wie das Bild in den Container passt, ähnlich wie beim nativen [`object-fit`](https://developer.mozilla.org/de/docs/Web/CSS/object-fit). ### Symbol-Avatar {#example-icon} Mit dem Attribut `icon` legen Sie ein Material Icons-Symbol als Avatar fest oder stellen im default Slot ein Symbol-Element als Avatar bereit. ```html ``` ### Zeichen-Avatar {#example-char} Im default Slot können Sie beliebigen Text als Avatar verwenden. ```html A ``` ## mdui-avatar API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
src src true string

URL des Avatar-Bildes.
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

Methode zur Bildanpassung, ähnlich der CSS-Eigenschaft object-fit. Mögliche Werte:

  • contain: Skaliert das Bild, um es in die Box einzupassen, wobei das Seitenverhältnis beibehalten wird. Das Bild wird "letterboxed" dargestellt, wenn die Seitenverhältnisse nicht übereinstimmen.
  • cover: Skaliert das Bild, um die Box zu füllen, wobei das Seitenverhältnis beibehalten wird. Das Bild wird beschnitten, wenn die Seitenverhältnisse nicht übereinstimmen.
  • fill: Standard. Skaliert das Bild, um die Box zu füllen; das Bild kann gestreckt werden, wenn die Seitenverhältnisse nicht übereinstimmen.
  • none: Keine Skalierung.
  • scale-down: Skaliert das Bild herunter, um es einzupassen. Verhält sich wie none oder contain, je nachdem, welches Ergebnis das kleinere Bild liefert.
icon icon true string

Der Name des Material Icons für den Avatar.
label label true string

Textbeschreibung des Avatars.
### Slots
Name Beschreibung
Standard

Eigener Avatar-Inhalt, z. B. Buchstaben, <img>-Elemente oder Icons.
### CSS Parts
Name Beschreibung
image

Internes <img>-Element bei Verwendung eines Bild-Avatars.
icon

Internes <mdui-icon>-Element bei Verwendung eines Icon-Avatars.
### CSS Custom Property
Name Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Badge-Komponente Badges zeigen dynamische Informationen an, etwa Zählungen oder Statusanzeigen. Sie können Text oder Zahlen enthalten. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/badge.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Badge } from 'mdui/components/badge.js'; ``` Beispiel: ```html 12 ``` ## Beispiele {#examples} ### Form {#example-variant} Mit dem Attribut `variant` legen Sie die Form des Badges fest. Setzen Sie `variant` auf `large`, wenn das Badge groß sein soll. Der Text steht im default Slot. ```html 99+ ``` ## mdui-badge API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'small' | 'large' 'large'

Definiert die Badge-Größe. Mögliche Werte:

  • small: Ein kleines Badge ohne Text.
  • large: Ein großes Badge mit Text.
### Slots
Name Beschreibung
Standard

Der anzuzeigende Text.
### CSS Custom Property
Name Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Bottom App Bar-Komponente Die Bottom App Bar zeigt auf Mobilgeräten Navigationselemente und wichtige Aktionen am unteren Rand an. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/bottom-app-bar.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` Beispiel: Das `style="position: relative"` im Beispiel dient nur zur Veranschaulichung; entfernen Sie dieses Stilattribut in echten Projekten. ```html
``` **Wichtige Hinweise:** Diese Komponente verwendet standardmäßig die Positionierung `position: fixed` und fügt automatisch `padding-bottom` zum `body` hinzu, um zu verhindern, dass Seiteninhalte von dieser Komponente verdeckt werden. In den folgenden zwei Fällen wird jedoch standardmäßig die Positionierung `position: absolute` verwendet: 1. Wenn das Attribut `scroll-target` angegeben ist. In diesem Fall wird `padding-bottom` zum Element `scroll-target` hinzugefügt. 2. Wenn sie sich innerhalb von [``](/de/docs/2/components/layout) befindet. In diesem Fall wird kein `padding-bottom` hinzugefügt. ## Beispiele {#examples} ### Innerhalb eines angegebenen Containers {#example-scroll-target} Standardmäßig wird die Bottom App Bar unten im aktuellen Fenster angezeigt. Wenn Sie die Bottom App Bar in einem bestimmten Container platzieren möchten, geben Sie das Attribut `scroll-target` an. Der Wert kann ein CSS-Selektor oder ein DOM-Element des scrollbaren Inhaltscontainers sein. In diesem Fall wird die Bottom App Bar relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile `position: relative; overflow: hidden` hinzufügen). ```html
Inhalt
``` ### Beim Scrollen ausblenden {#example-scroll-behavior} Wenn Sie das Attribut `scroll-behavior` auf `hide` setzen, wird die Bottom App Bar beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben wieder eingeblendet. Mit dem Attribut `scroll-threshold` können Sie festlegen, wie viele Pixel gescrollt werden müssen, bevor die Bottom App Bar ausgeblendet wird. ```html
Inhalt
``` ### Fixierte Floating Action Button {#example-fab-detach} Wenn die Bottom App Bar eine [Floating Action Button](/de/docs/2/components/fab) enthält, können Sie das Attribut `fab-detach` hinzufügen, sodass der Floating Action Button auch beim Scrollen und Ausblenden der Bottom App Bar in der unteren rechten Ecke der Seite verbleibt. ```html
``` ## mdui-bottom-app-bar API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
hide hide true boolean false

Gibt an, ob die Bottom App Bar ausgeblendet ist.
fab-detach fabDetach true boolean false

Wenn gesetzt, wird der <mdui-fab> von der Bottom App Bar gelöst. Der <mdui-fab> bleibt auf der Seite, auch nachdem die App-Leiste ausgeblendet wurde.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Gibt das Scroll-Verhalten an. Mögliche Werte:

  • hide: Wird beim Scrollen ausgeblendet.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Das auf Scroll-Ereignisse zu überwachende Element. Akzeptiert einen CSS-Selektor, ein DOM-Element oder ein JQ-Objekt. Standardwert ist window.
scroll-threshold scrollThreshold true number

Die Scroll-Distanz (in Pixeln), die erforderlich ist, um das Scroll-Verhalten auszulösen.
order order true number

Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
### Ereignisse
Name Beschreibung
show

Wird ausgelöst, wenn die Bottom App Bar beginnt, sich anzuzeigen. Kann mit event.preventDefault() verhindert werden.
shown

Wird ausgelöst, nachdem die Bottom App Bar angezeigt wurde und die Animationen abgeschlossen sind.
hide

Wird ausgelöst, wenn die Bottom App Bar beginnt, sich auszublenden. Kann mit event.preventDefault() verhindert werden.
hidden

Wird ausgelöst, nachdem die Bottom App Bar ausgeblendet wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Elemente innerhalb der Bottom App Bar.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# Button-Komponente 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 {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/button.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Button } from 'mdui/components/button.js'; ``` Beispiel: ```html Button ``` ## Beispiele {#examples} ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form des Buttons. ```html Elevated Filled Tonal Outlined Text ``` ### Volle Breite {#example-full-width} Mit dem Attribut `full-width` nimmt der Button die volle Breite des übergeordneten Elements ein. ```html Button ``` ### Symbol {#example-icon} 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. ```html Icon Slot ``` ### Link {#example-link} Mit dem Attribut `href` verwandeln Sie den Button in einen Link. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html Link ``` ### Deaktivierter und Ladezustand {#example-disabled} Mit dem Attribut `disabled` wird der Button deaktiviert. Mit dem Attribut `loading` wird ein Ladezustand angezeigt. ```html Deaktiviert Laden Laden & Deaktiviert ``` ## mdui-button API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true '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 true boolean false

Wenn gesetzt, füllt der Button die gesamte Breite seines Containers aus.
icon icon true string

Legt den Namen des Material Icons links fest. Alternativ können Sie slot="icon" verwenden.
end-icon endIcon true string

Legt den Namen des Material Icons rechts fest. Alternativ können Sie slot="end-icon" verwenden.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
disabled disabled true boolean false

Deaktiviert das Element.
loading loading true boolean false

Gibt an, dass sich das Element in einem Ladezustand befindet.
name name true string ''

Der Button-Name, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
value value true string ''

Der Button-Wert, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
type type true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
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 Beschreibung
Standard

Button-Text.
icon

Element auf der linken Seite des Buttons.
end-icon

Element auf der rechten Seite des Buttons.
### CSS Parts
Name Beschreibung
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 Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Icon Button-Komponente Icon Buttons werden vor allem für sekundäre Aktionen verwendet. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/button-icon.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Icon {#example-icon} Mit dem Attribut `icon` geben Sie den Namen eines Material Icons an. Sie können das Icon-Element auch im default Slot angeben. ```html ``` ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form des Icon Buttons. ```html ``` ### Auswählbar {#example-selectable} Mit dem Attribut `selectable` wird der Icon Button auswählbar. ```html ``` 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. ```html ``` 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. ```html ``` ### Link {#example-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. ```html ``` ### Deaktivierter und Ladezustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um den Icon Button zu deaktivieren. Mit dem Attribut `loading` wird ein Ladezustand angezeigt. ```html ``` ## mdui-button-icon API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true '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 true string

Legt den Namen des Material Icons fest. Alternativ können Sie den Standard-Slot verwenden.
selected-icon selectedIcon true string

Legt den Namen des Material Icons für den ausgewählten Zustand fest. Alternativ können Sie slot="selected-icon" verwenden.
selectable selectable true boolean false

Macht den Button auswählbar.
selected selected true boolean false

Gibt an, ob der Button ausgewählt ist.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
disabled disabled true boolean false

Deaktiviert das Element.
loading loading true boolean false

Gibt an, dass sich das Element in einem Ladezustand befindet.
name name true string ''

Der Button-Name, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
value value true string ''

Der Button-Wert, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
type type true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
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 Beschreibung
Standard

Icon-Komponente.
selected-icon

Icon im ausgewählten Zustand.
### CSS Parts
Name Beschreibung
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 Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Card-Komponente Die Card ist eine vielseitige Komponente zur Darstellung von Inhalten und Aktionen, die sich auf ein einzelnes Thema beziehen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/card.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Card } from 'mdui/components/card.js'; ``` Beispiel: ```html Card ``` ## Beispiele {#examples} ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form der Card. ```html ``` ### Anklickbar {#example-clickable} Mit dem Attribut `clickable` wird die Card anklickbar und erhält einen Maus-Hover-Effekt sowie einen Klick-Wellen-Effekt. ```html ``` ### Link {#example-link} Mit dem Attribut `href` verwandeln Sie die Card in einen Link. Zusätzlich stehen die Attribute `download`, `target` und `rel` zur Verfügung. ```html ``` ### Deaktivierter Zustand {#example-disabled} Mit dem Attribut `disabled` wird die Card deaktiviert. ```html ``` ## mdui-card API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

Definiert die Card-Variante. Mögliche Werte:

  • elevated: Mit Schatten, bietet mehr Abgrenzung vom Hintergrund als filled, aber weniger als outlined.
  • filled: Bietet minimale Abgrenzung vom Hintergrund.
  • outlined: Mit Rahmen, bietet die größte Abgrenzung vom Hintergrund.
clickable clickable true boolean false

Macht die Card anklickbar. Wenn gesetzt, werden Hover- und Klick-Ripple-Effekte hinzugefügt.
disabled disabled true boolean false

Deaktiviert die Card.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn die Card den Fokus erhält.
blur

Wird ausgelöst, wenn die Card den Fokus verliert.
### Slots
Name Beschreibung
Standard

Card-Inhalt.
### CSS Custom Property
Name Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Checkbox-Komponente Checkboxen ermöglichen es Benutzern, eine oder mehrere Optionen aus einer Gruppe von Optionen auszuwählen oder den Ein-/Aus-Zustand einer einzelnen Option umzuschalten. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/checkbox.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` Beispiel: ```html Checkbox ``` ## Beispiele {#examples} ### Ausgewählter Zustand {#example-checked} Wenn die Checkbox ausgewählt ist, hat das Attribut `checked` den Wert `true`. Fügen Sie das Attribut `checked` hinzu, um die Checkbox standardmäßig ausgewählt zu haben. ```html Checkbox ``` ### Deaktivierter Zustand {#example-disabled} Mit dem Attribut `disabled` wird die Checkbox deaktiviert. ```html Checkbox Checkbox ``` ### Unbestimmter Zustand {#example-indeterminate} Mit dem Attribut `indeterminate` versetzen Sie die Checkbox in einen unbestimmten Zustand. ```html Checkbox ``` ### Symbol {#example-icon} Über die Attribute `unchecked-icon`, `checked-icon` und `indeterminate-icon` können Sie die Material Icons-Symbole für die Zustände nicht ausgewählt, ausgewählt und unbestimmt festlegen. Sie können dies auch über die Slots `unchecked-icon`, `checked-icon` und `indeterminate-icon` tun. ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
disabled disabled true boolean false

Deaktiviert die Checkbox.
checked checked true boolean false

Setzt die Checkbox in den aktivierten Zustand.
undefined defaultChecked false boolean false

Setzt den standardmäßig aktivierten Zustand. Die Checkbox setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
indeterminate indeterminate true boolean false

Setzt die Checkbox in einen unbestimmten Zustand.
required required true boolean false

Die Checkbox muss aktiviert sein, um das Formular zu senden.
form form true string

Verknüpft die Checkbox mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Checkbox ihr übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es der Checkbox, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
name name true string ''

Setzt den Namen der Checkbox, der mit Formulardaten übermittelt wird.
value value true string 'on'

Setzt den Wert der Checkbox, der mit Formulardaten übermittelt wird.
unchecked-icon uncheckedIcon true string

Legt den Namen des Material Icons für den nicht aktivierten Zustand fest. Alternativ können Sie slot="unchecked-icon" verwenden.
checked-icon checkedIcon true string

Legt den Namen des Material Icons für den aktivierten Zustand fest. Alternativ können Sie slot="checked-icon" verwenden.
indeterminate-icon indeterminateIcon true string

Legt den Namen des Material Icons für den unbestimmten Zustand fest. Alternativ können Sie slot="indeterminate-icon" verwenden.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
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.
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn die Checkbox den Fokus erhält.
blur

Wird ausgelöst, wenn die Checkbox den Fokus verliert.
change

Wird ausgelöst, wenn sich der aktivierte Zustand ändert.
input

Wird ausgelöst, wenn sich der aktivierte 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 Beschreibung
Standard

Text.
unchecked-icon

Icon für den nicht aktivierten Zustand.
checked-icon

Icon für den aktivierten Zustand.
indeterminate-icon

Icon für den unbestimmten Zustand.
### CSS Parts
Name Beschreibung
control

Container für das linke Icon.
unchecked-icon

Icon für den nicht aktivierten Zustand.
checked-icon

Icon für den aktivierten Zustand.
indeterminate-icon

Icon für den unbestimmten Zustand.
label

Text.
# Chip-Komponente 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 {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/chip.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Chip } from 'mdui/components/chip.js'; ``` Beispiel: ```html Chip ``` ## Beispiele {#examples} ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form des Chips. Es gibt 4 Formen, je nach Verwendungszweck: - `assist`: Für unterstützende Aktionen im aktuellen Kontext. Zum Beispiel Teilen, Favorisieren auf einer Bestellseite. - `filter`: Zum Filtern von Inhalten. Zum Beispiel Filtern von Suchergebnissen auf einer Suchergebnisseite. - `input`: Zur Darstellung von Benutzereingaben. Zum Beispiel Kontakte im Feld "An" in Gmail. - `suggestion`: Zur Bereitstellung dynamisch generierter Empfehlungen. Zum Beispiel in einer Chat-Anwendung, um dem Benutzer mögliche Nachrichten vorzuschlagen. ```html Assist Filter Input Suggestion ``` ### Schatten {#example-elevated} Fügen Sie das Attribut `elevated` hinzu, um dem Chip einen Schatten zu geben. ```html Chip ``` ### Symbol {#example-icon} Fügen Sie die Attribute `icon` und `end-icon` hinzu, um links bzw. rechts vom Chip ein Material Icons-Symbol zu platzieren. Sie können auch über die Slots `icon` und `end-icon` Elemente hinzufügen. ```html Icon End Icon Slot ``` ### Link {#example-link} Mit dem Attribut `href` verwandeln Sie den Chip in einen Link. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html Link ``` ### Deaktivierter und Ladezustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um den Chip zu deaktivieren. Mit dem Attribut `loading` wird ein Ladezustand angezeigt. ```html Deaktiviert Laden Laden & Deaktiviert ``` ### Auswählbar {#example-selectable} Mit dem Attribut `selectable` wird der Chip auswählbar. ```html 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. ```html Chip Chip ``` 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. ```html Chip ``` ### Löschbar {#example-deletable} 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. ```html Chip Chip Chip ``` ## mdui-chip API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true '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 true boolean false

Fügt dem Chip einen Schatten hinzu.
selectable selectable true boolean false

Macht den Chip auswählbar.
selected selected true boolean false

Markiert den Chip als ausgewählt.
deletable deletable true boolean false

Macht den Chip löschbar. Wenn gesetzt, erscheint ein Lösch-Icon auf der rechten Seite.
icon icon true string

Legt den Namen des Material Icons links fest. Alternativ können Sie slot="icon" verwenden.
selected-icon selectedIcon true 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 true string

Legt den Namen des Material Icons rechts fest. Alternativ können Sie slot="end-icon" verwenden.
delete-icon deleteIcon true 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 true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
disabled disabled true boolean false

Deaktiviert das Element.
loading loading true boolean false

Gibt an, dass sich das Element in einem Ladezustand befindet.
name name true string ''

Der Button-Name, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
value value true string ''

Der Button-Wert, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
type type true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
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 Beschreibung
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 Beschreibung
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 Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Circular Progress-Komponente Circular Progress ist eine kreisförmige Komponente zur Anzeige des Fortschritts einer Aufgabe, z. B. beim Laden von Daten oder beim Absenden eines Formulars. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/circular-progress.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Festgelegter Fortschritt {#example-value} Der Circular Progress hat standardmäßig einen unbestimmten Fortschritt. Sie können den aktuellen Fortschritt mit dem Attribut `value` festlegen. Der Standardmaximalwert des Fortschritts ist `1`. ```html ``` Sie können den Maximalwert des Fortschritts mit dem Attribut `max` festlegen. ```html ``` ## mdui-circular-progress API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
max max true number 1

Legt den Maximalwert für die Fortschrittsanzeige fest. Der Standardwert ist 1.
value value false number

Legt den aktuellen Wert der Fortschrittsanzeige fest. Wenn nicht angegeben, befindet sich die Fortschrittsanzeige in einem unbestimmten Zustand.
# Collapse-Komponente Die Collapse-Komponente gruppiert komplexe Inhaltsbereiche und blendet sie bei Bedarf aus, damit die Seite übersichtlich bleibt. Die Collapse-Komponente bringt selbst kein Styling mit. Ergänzen Sie die Stile bei Bedarf selbst oder verwenden Sie die Komponente zusammen mit anderen Komponenten. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` Beispiel: ```html erster Inhalt zweiter Inhalt ``` ## Beispiele {#examples} ### Titel und Inhalt des Panels {#example-header} Mit dem Attribut `header` der Komponente `` können Sie den Text im Kopfbereich des Panels festlegen. Sie können den Kopfbereich auch im `header` Slot angeben. Der default Slot der Komponente ist für den Inhalt des Panels. ```html Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
``` ### Akkordeon-Modus {#example-accordion} Fügen Sie das Attribut `accordion` zur Komponente `` hinzu, um den Akkordeon-Modus zu aktivieren. In diesem Modus ist immer nur ein Panel geöffnet. ```html Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
``` ### Aktive Panels festlegen {#example-value} Über das Attribut `value` der Komponente `` können Sie das aktuell geöffnete Panel abrufen oder das zu öffnende Panel festlegen. Im Akkordeon-Modus ist der Wert des Attributs `value` ein String. Sie können dieses Attribut über ein HTML-Attribut oder eine JavaScript-Property manipulieren. Im Nicht-Akkordeon-Modus ist der Wert des Attributs `value` ein Array, das nur über eine JavaScript-Property manipuliert werden kann. ```html Akkordeon-Modus Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
Nicht-Akkordeon-Modus Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
``` ### Deaktivierter Zustand {#example-disabled} Durch Hinzufügen des Attributs `disabled` zur Komponente `` können Sie die gesamte Collapse-Gruppe deaktivieren. Ebenso können Sie ein bestimmtes Panel deaktivieren, indem Sie das Attribut `disabled` zur Komponente `` hinzufügen. ```html Alle deaktivieren Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
Erstes Panel deaktivieren Item 1
Item 1 - Unterpunkt
Item 2
Item 2 - Unterpunkt
``` ### Element, das das Zusammenklappen auslöst {#example-trigger} Standardmäßig löst ein Klick auf den gesamten Kopfbereich des Panels das Zusammenklappen aus. Sie können das Attribut `trigger` der Komponente `` verwenden, um das Element anzugeben, das das Zusammenklappen auslöst. Der Wert des Attributs `trigger` kann ein CSS-Selektor oder ein DOM-Element sein. ```html Item 1
Item 1 - Unterpunkt
``` ## mdui-collapse-item API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value true string

Gibt den Wert des Collapse-Panel-Elements an.
header header true string

Setzt den Header-Text für das Collapse-Panel-Element.
disabled disabled true boolean false

Deaktiviert das Collapse-Panel-Element.
trigger trigger false string | HTMLElement | JQ<HTMLElement>

Das Element, das das Auf- und Zuklappen bei Klick umschaltet. Dies kann ein CSS-Selektor, ein DOM-Element oder ein JQ-Objekt sein. Standardmäßig ist der gesamte Header-Bereich der Auslöser.
### Ereignisse
Name Beschreibung
open

Wird ausgelöst, wenn das Collapse-Element beginnt, sich zu öffnen.
opened

Wird ausgelöst, nachdem das Collapse-Element geöffnet wurde und die Animationen abgeschlossen sind.
close

Wird ausgelöst, wenn das Collapse-Element beginnt, sich zu schließen.
closed

Wird ausgelöst, nachdem das Collapse-Element geschlossen wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Hauptinhalt des Collapse-Panel-Elements.
header

Inhalt des Headers des Collapse-Panel-Elements.
### CSS Parts
Name Beschreibung
header

Inhalt des Headers des Collapse-Panels.
body

Inhalt des Hauptteils des Collapse-Panels.
## mdui-collapse API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
accordion accordion true boolean false

Aktiviert den Akkordeon-Modus.
value value false string | string[]

Gibt den Wert des geöffneten <mdui-collapse-item> an.

Hinweis: Das HTML-Attribut ist immer eine Zeichenfolge und kann nur initial gesetzt werden, wenn accordion true ist. Die JavaScript-Eigenschaft ist eine Zeichenfolge, wenn accordion true ist, und ein Zeichenfolgen-Array, wenn accordion false ist. Um diesen Wert zu ändern, wenn accordion false ist, aktualisieren Sie die JavaScript-Eigenschaft.
disabled disabled true boolean false

Deaktiviert das Collapse-Panel.
### Ereignisse
Name Beschreibung
change

Wird ausgelöst, wenn sich das aktuell geöffnete Collapse-Element ändert.
### Slots
Name Beschreibung
Standard

Die <mdui-collapse-item>-Komponenten.
# Dialog-Komponente Dialoge zeigen wichtige Hinweise im aktuellen Arbeitsablauf des Benutzers an. Zusätzlich zur direkten Verwendung dieser Komponente bietet mdui vier Funktionen an: [`mdui.dialog`](/de/docs/2/functions/dialog), [`mdui.alert`](/de/docs/2/functions/alert), [`mdui.confirm`](/de/docs/2/functions/confirm) und [`mdui.prompt`](/de/docs/2/functions/prompt). Diese Funktionen vereinfachen die Verwendung der Dialog-Komponente. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/dialog.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` Beispiel: ```html Dialog Schließen Dialog öffnen ``` ## Beispiele {#examples} ### Schließen durch Klick auf das Overlay {#example-close-on-overlay-click} Mit dem Attribut `close-on-overlay-click` schließen Sie den Dialog per Klick auf die Overlay-Schicht. ```html Dialog Dialog öffnen ``` ### Schließen durch Drücken der ESC-Taste {#example-close-on-esc} Mit dem Attribut `close-on-esc` schließen Sie den Dialog mit der ESC-Taste. ```html Dialog Dialog öffnen ``` ### Vollbild {#example-fullscreen} Mit dem Attribut `fullscreen` wird der Dialog im Vollbildmodus angezeigt. ```html Dialog Schließen Dialog öffnen ``` ### Symbol {#example-icon} Mit dem Attribut `icon` wird über dem Dialog ein Material Icons-Symbol hinzugefügt. ```html Dialog Dialog öffnen ``` Sie können das Element auch über den Slot `icon` über dem Dialog platzieren. ```html Dialog Dialog öffnen ``` ### Titel und Beschreibung {#example-headline} Setzen Sie die Attribute `headline` und `description`, um Titel und Beschreibung des Dialogs festzulegen. ```html Dialog öffnen ``` Sie können die Elemente für Titel und Beschreibung auch über die Slots `headline` und `description` festlegen. ```html Ausgewählte Bilder löschen? Die Bilder werden dauerhaft aus Ihrem Konto und von allen synchronisierten Geräten entfernt. Dialog öffnen ``` ### Aktionsbuttons unten {#example-action} Sie können über den Slot `action` unten im Dialog Aktionsbuttons hinzufügen. ```html Abbrechen Löschen Dialog öffnen ``` Mit dem Attribut `stacked-actions` ordnen Sie die Aktionsbuttons unten vertikal an. ```html Geschwindigkeitssteigerung aktivieren Nein danke Dialog öffnen ``` ### Kopfbereichsinhalt {#example-header} Sie können über den Slot `header` den Kopfbereich des Dialogs festlegen. ```html Titel Speichern
Dialog öffnen ``` ## mdui-dialog API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
icon icon true string

Legt den Namen des Material Icons für das obere Icon fest. Alternativ können Sie slot="icon" verwenden.
headline headline true string

Legt den Dialog-Titel fest. Alternativ können Sie slot="headline" verwenden.
description description true string

Text, der unter dem Titel angezeigt wird. Alternativ können Sie slot="description" verwenden.
open open true boolean false

Öffnet den Dialog.
fullscreen fullscreen true boolean false

Zeigt den Dialog im Vollbildmodus an.
close-on-esc closeOnEsc true boolean false

Schließt den Dialog, wenn die ESC-Taste gedrückt wird.
close-on-overlay-click closeOnOverlayClick true boolean false

Schließt den Dialog, wenn auf das Overlay geklickt wird.
stacked-actions stackedActions true boolean false

Stapelt die unteren Aktionsschaltflächen vertikal.
### Ereignisse
Name Beschreibung
open

Wird ausgelöst, wenn der Dialog beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
opened

Wird ausgelöst, nachdem der Dialog geöffnet wurde und die Animationen abgeschlossen sind.
close

Wird ausgelöst, wenn der Dialog beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
closed

Wird ausgelöst, nachdem der Dialog geschlossen wurde und die Animationen abgeschlossen sind.
overlay-click

Wird ausgelöst, wenn auf das Overlay geklickt wird.
### Slots
Name Beschreibung
header

Header-Bereich; enthält standardmäßig die Slots icon und headline.
icon

Oberes Icon.
headline

Obere Überschrift.
description

Text unter dem Titel.
Standard

Hauptinhalt des Dialogs.
action

Elemente in der unteren Aktionsleiste.
### CSS Parts
Name Beschreibung
overlay

Overlay-Ebene.
panel

Dialog-Container.
header

Dialog-Header, enthält Icon und Überschrift.
icon

Oberes Icon im Header.
headline

Obere Überschrift im Header.
body

Dialog-Hauptteil.
description

Untertext im Hauptteil.
action

Untere Aktionsschaltflächen.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# Divider-Komponente Ein Divider ist eine dünne Linie, die zur Gruppierung von Inhalten in Listen und Containern verwendet wird. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/divider.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Divider } from 'mdui/components/divider.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Vertikaler Divider {#example-vertical} Mit dem Attribut `vertical` wird der Divider vertikal angezeigt. ```html
``` ### Einzug links {#example-inset} Mit dem Attribut `inset` rücken Sie den Divider links ein. Dies wird oft in Listen verwendet, um den Divider an den linken Text auszurichten. ```html Item 1 Item 2 ``` ### Einzug beidseitig {#example-middle} Mit dem Attribut `middle` rücken Sie den Divider beidseitig ein. ```html Item 1 Item 2 ``` ## mdui-divider API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
vertical vertical true boolean false

Zeigt die Trennlinie vertikal an.
inset inset true boolean false

Fügt einen Einzug von der linken Seite hinzu.
middle middle true boolean false

Fügt Einzüge von der linken und rechten Seite hinzu.
# Dropdown-Komponente Die Dropdown-Komponente zeigt Inhalte in einem schwebenden Element an und wird oft zusammen mit der Menü-Komponente verwendet. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/dropdown.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` Beispiel: ```html Dropdown öffnen Item 1 Item 2 ``` ## Beispiele {#examples} ### Deaktivierter Zustand {#example-disabled} Mit dem Attribut `disabled` wird die Dropdown-Komponente deaktiviert. ```html Dropdown öffnen Item 1 Item 2 ``` ### Öffnungsposition {#example-placement} Mit dem Attribut `placement` legen Sie die Öffnungsposition der Dropdown-Komponente fest. ```html Dropdown öffnen Item 1 Item 2 ``` ### Auslösemechanismus {#example-trigger} Mit dem Attribut `trigger` legen Sie fest, wie die Dropdown-Komponente ausgelöst wird. ```html Dropdown öffnen Item 1 Item 2 ``` ### An der Mausposition öffnen {#example-open-on-pointer} Mit dem Attribut `open-on-pointer` wird die Dropdown-Komponente an der Mausposition geöffnet. Das wird oft zusammen mit `trigger="contextmenu"` verwendet, um per Rechtsklick ein Kontextmenü zu öffnen. ```html Hier mit der rechten Maustaste klicken, um das Menü zu öffnen Item 1 Item 2 ``` ### Menü geöffnet halten {#example-stay-open-on-click} Wenn Sie in der Dropdown-Komponente ein Menü verwenden, schließt sich die Dropdown-Komponente standardmäßig automatisch, wenn Sie auf einen Menüpunkt klicken. Mit dem Attribut `stay-open-on-click` bleibt sie geöffnet. ```html Dropdown öffnen Item 1 Item 2 ``` ### Verzögerung beim Öffnen/Schließen {#example-delay} Wenn `trigger="hover"` gesetzt ist, können Sie mit den Attributen `open-delay` und `close-delay` die Verzögerung beim Öffnen und Schließen festlegen. ```html Dropdown öffnen Item 1 Item 2 ``` ## mdui-dropdown API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
open open true boolean false

Öffnet das Dropdown.
disabled disabled true boolean false

Deaktiviert das Dropdown.
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

Definiert, wie das Dropdown geöffnet wird. Mehrere durch Leerzeichen getrennte Werte werden unterstützt. Mögliche Werte:

  • click: Wird bei Klick ausgelöst.
  • hover: Wird bei Mouseover ausgelöst.
  • focus: Wird beim Fokussieren ausgelöst.
  • contextmenu: Wird bei Rechtsklick oder langem Drücken ausgelöst.
  • manual: Wenn verwendet, kann das Dropdown nur programmgesteuert geöffnet und geschlossen werden, und es können keine anderen Auslösemethoden angegeben werden.
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Legt die Position des Dropdowns fest. Mögliche Werte:

  • auto: Automatisch bestimmt.
  • top-start: Oben und linksbündig.
  • top: Oben und zentriert.
  • top-end: Oben und rechtsbündig.
  • bottom-start: Unten und linksbündig.
  • bottom: Unten und zentriert.
  • bottom-end: Unten und rechtsbündig.
  • left-start: Links und oben ausgerichtet.
  • left: Links und zentriert.
  • left-end: Links und unten ausgerichtet.
  • right-start: Rechts und oben ausgerichtet.
  • right: Rechts und zentriert.
  • right-end: Rechts und unten ausgerichtet.
stay-open-on-click stayOpenOnClick true boolean false

Verhindert, dass das Dropdown geschlossen wird, wenn ein <mdui-menu-item> angeklickt wird.
open-delay openDelay true number 150

Legt die Verzögerung (in ms) für das Öffnen des Dropdowns bei Mouseover fest.
close-delay closeDelay true number 150

Legt die Verzögerung (in ms) für das Schließen des Dropdowns bei Mouseover fest.
open-on-pointer openOnPointer true boolean false

Öffnet das Dropdown an der Zeigerposition. Dies wird typischerweise für Kontextmenüs verwendet.
### Ereignisse
Name Beschreibung
open

Wird ausgelöst, wenn das Dropdown beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
opened

Wird ausgelöst, nachdem das Dropdown geöffnet wurde und die Animationen abgeschlossen sind.
close

Wird ausgelöst, wenn das Dropdown beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
closed

Wird ausgelöst, nachdem das Dropdown geschlossen wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Der Inhalt des Dropdowns.
trigger

Das Element, das das Dropdown auslöst, z. B. ein <mdui-button>-Element.
### CSS Parts
Name Beschreibung
trigger

Container für das Element, das das Dropdown auslöst; dies ist der Container des trigger-Slots.
panel

Der Container des Dropdown-Inhalts.
### CSS Custom Property
Name Beschreibung
--z-index

Der CSS z-index-Wert der Komponente.
# Floating Action Button-Komponente Der Floating Action Button (FAB) hebt die primäre Aktion auf einer Seite hervor und platziert sie an einem leicht zugänglichen Ort. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/fab.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Fab } from 'mdui/components/fab.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Symbol {#example-icon} 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. ```html ``` ### Erweiterter Zustand {#example-extended} Fügen Sie das Attribut `extended` hinzu, um den FAB in den erweiterten Zustand zu versetzen. Der Text im default Slot wird dann angezeigt. ```html Verfassen ``` ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form des FAB. ```html ``` ### Größe {#example-size} Verwenden Sie das Attribut `size`, um die Größe des FAB festzulegen. ```html ``` ### Link {#example-link} Mit dem Attribut `href` verwandeln Sie den FAB in einen Link. Zusätzlich stehen die Attribute `download`, `target` und `rel` zur Verfügung. ```html ``` ### Deaktivierter und Ladezustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um den FAB zu deaktivieren. Mit dem Attribut `loading` wird ein Ladezustand angezeigt. ```html ``` ## mdui-fab API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true '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 true '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 true string

Legt den Namen des Material Icons fest. Alternativ können Sie slot="icon" verwenden.
extended extended true boolean false

Erweitert die FAB, um Text neben dem Icon anzuzeigen.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
disabled disabled true boolean false

Deaktiviert das Element.
loading loading true boolean false

Gibt an, dass sich das Element in einem Ladezustand befindet.
name name true string ''

Der Button-Name, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
value value true string ''

Der Button-Wert, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
type type true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
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 Beschreibung
Standard

Textinhalt.
icon

Icon.
### CSS Parts
Name Beschreibung
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 Beschreibung
--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.
# Icon-Komponente Icons werden verwendet, um gängige Aktionen darzustellen. Sie unterstützen Material Icons-Symbole sowie SVG-Symbole. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/icon.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Icon } from 'mdui/components/icon.js'; ``` Beispiel: ```html ``` ### Verwenden von Material Icons-Symbolen {#usage-material-icons} Um Material Icons-Symbole mit dieser Komponente zu verwenden, müssen Sie die CSS-Datei von Material Icons separat importieren. Material Icons gibt es in 5 Varianten: Filled, Outlined, Rounded, Sharp, Two Tone. Bitte importieren Sie die entsprechende CSS-Datei je nach der gewünschten Symbolvariante: ```html ``` Wenn Sie die Komponente verwenden, übergeben Sie den Symbolnamen im Attribut `name` mit dem Suffix der Symbolvariante (die Filled-Variante benötigt keinen Suffix). Hier ist die Verwendung der 5 Varianten des Symbols `delete`: ```html ``` Sie können das [Material Icons Symbolsuchwerkzeug](/de/docs/2/components/icon#search) unten auf der Seite verwenden, um ein Symbol zu suchen. Ein Klick auf das gewünschte Symbol kopiert dann automatisch den Symbolcode in die Zwischenablage. Darüber hinaus bietet mdui ein separates Paket [`@mdui/icons`](/de/docs/2/libraries/icons) an, in dem jede Symbolkomponente eine eigenständige Datei ist. So können Sie nur die benötigten Symbolkomponenten importieren, ohne die gesamte Symbolbibliothek laden zu müssen. ### Verwenden von SVG-Symbolen {#usage-svg} Diese Komponente unterstützt auch die Verwendung von SVG-Symbolen als Symbolinhalt. Sie können den Link zu einem SVG-Symbol im Attribut `src` der Komponente angeben. Zum Beispiel: ```html ``` Sie können den SVG-Inhalt auch im default Slot der Komponente übergeben. Zum Beispiel: ```html ``` ## Beispiele {#examples} ### Farbe festlegen {#example-color} Ändern Sie das CSS-Stilattribut `color` des ``-Elements oder seines übergeordneten Elements, um die Symbolfarbe zu ändern. ```html ``` ### Größe festlegen {#example-size} Ändern Sie das CSS-Stilattribut `font-size` des ``-Elements oder seines übergeordneten Elements, um die Symbolgröße zu ändern. ```html ``` ## mdui-icon API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
name name true string

Gibt den Namen des Material Icons an.
src src true string

Gibt den Pfad des SVG-Icons an.
### Slots
Name Beschreibung
Standard

Der SVG-Icon-Inhalt.
# Layout-Komponente Die Layout-Komponente bietet ein flexibles Layout-System zum Erstellen komplexer Seitenlayouts. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **Einführung:** Das Layout-System folgt dem Prinzip von außen nach innen. Jede Layout-Komponente (``) belegt eine der vier Seiten (oben, unten, links, rechts). Die jeweils folgenden Layout-Komponenten nutzen anschließend den verbleibenden Platz. Die folgenden Komponenten erben direkt von der ``-Komponente und können daher auch als Layout-Komponenten verwendet werden: - [``](/de/docs/2/components/navigation-bar) - [``](/de/docs/2/components/navigation-drawer) - [``](/de/docs/2/components/navigation-rail) - [``](/de/docs/2/components/bottom-app-bar) - [``](/de/docs/2/components/top-app-bar) Die ``-Komponente bildet den letzten Teil des Layout-Systems und nimmt den verbleibenden Platz ein. In ihr platzieren Sie den Seiteninhalt. ## Beispiele {#examples} ### Reihenfolge der Layout-Komponenten {#layout-default-order} Standardmäßig nehmen die Layout-Komponenten ihren Platz in der Reihenfolge ein, in der sie im Code erscheinen. Die folgenden zwei Beispiele verdeutlichen dieses Konzept. In diesen Beispielen werden [``](/de/docs/2/components/top-app-bar) und [``](/de/docs/2/components/navigation-drawer) in unterschiedlicher Reihenfolge im Code angegeben.

Bitte sehen Sie sich dieses Beispiel auf einem großen Monitor an.

```html Top App Bar Navigation Drawer Hauptbereich ``` ```html Navigation Drawer Top App Bar Hauptbereich ``` Sie sehen: Steht [``](/de/docs/2/components/top-app-bar) vor [``](/de/docs/2/components/navigation-drawer), nimmt [``](/de/docs/2/components/top-app-bar) zuerst die gesamte Breite des Bildschirms ein, während [``](/de/docs/2/components/navigation-drawer) nur im verbleibenden Platz die gesamte Höhe einnehmen kann. In umgekehrter Reihenfolge nimmt [``](/de/docs/2/components/navigation-drawer) zuerst die gesamte Höhe des Bildschirms ein, während [``](/de/docs/2/components/top-app-bar) nur im verbleibenden Platz die gesamte Breite einnehmen kann. ### Position der Layout-Komponenten {#example-placement} Für die ``-Komponente können Sie das Attribut `placement` verwenden, um ihre Position oben, unten, links oder rechts im Layout festzulegen. Für die Komponenten [``](/de/docs/2/components/navigation-drawer) und [``](/de/docs/2/components/navigation-rail) können Sie das Attribut `placement` ebenfalls verwenden, um ihre linke oder rechte Position im Layout festzulegen. Im folgenden Beispiel platzieren wir zwei ``-Komponenten auf beiden Seiten der Anwendung. ```html Top App Bar Layout-Element Layout-Element Hauptbereich ``` ### Benutzerdefinierte Reihenfolge der Layout-Komponenten {#example-order} In den meisten Fällen können Sie das gewünschte Layout erreichen, indem Sie die Layout-Komponenten in der richtigen Reihenfolge platzieren. Sie können auch das Attribut `order` verwenden, um die Layout-Reihenfolge festzulegen. Das System ordnet die Komponenten dann nach aufsteigenden `order`-Werten. Bei gleichem `order` wird die Reihenfolge im Code verwendet. Alle Layout-Komponenten haben standardmäßig den `order`-Wert `0`. ```html Layout-Element Top App Bar
order="-1" Hauptbereich ``` ## mdui-layout-item API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

Bestimmt, wo die Komponente platziert wird. Mögliche Werte:

  • top: Platziert die Komponente oben.
  • bottom: Platziert die Komponente unten.
  • left: Platziert die Komponente links.
  • right: Platziert die Komponente rechts.
order order true number

Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
### Slots
Name Beschreibung
Standard

Kann beliebigen Inhalt enthalten.
## mdui-layout-main API ### Slots
Name Beschreibung
Standard

Kann beliebigen Inhalt enthalten.
## mdui-layout API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
full-height fullHeight true boolean false

Setzt die Layout-Höhe auf 100 %.
### Slots
Name Beschreibung
Standard

Kann Elemente wie <mdui-top-app-bar>, <mdui-bottom-app-bar>, <mdui-navigation-bar>, <mdui-navigation-drawer>, <mdui-navigation-rail>, <mdui-layout-item> und <mdui-layout-main> enthalten.
# Linear Progress-Komponente Linear Progress ist eine horizontale Anzeige, die dem Benutzer den Fortschritt einer Aufgabe zeigt, z. B. beim Laden von Daten oder beim Absenden eines Formulars. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/linear-progress.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Fortschritt festlegen {#example-value} Linear Progress hat standardmäßig einen unbestimmten Fortschritt. Sie können den aktuellen Fortschritt mit dem Attribut `value` festlegen. Der Standardmaximalwert des Fortschritts ist `1`. ```html ``` Sie können den Maximalwert des Fortschritts mit dem Attribut `max` festlegen. ```html ``` ## mdui-linear-progress API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
max max true number 1

Legt den Maximalwert für die Fortschrittsanzeige fest. Der Standardwert ist 1.
value value false number

Legt den aktuellen Wert der Fortschrittsanzeige fest. Wenn nicht angegeben, befindet sich die Fortschrittsanzeige in einem unbestimmten Zustand.
### CSS Parts
Name Beschreibung
indicator

Indikator
### CSS Custom Property
Name Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Liste-Komponente Eine Liste ist eine vertikale Anordnung von Einträgen zur Darstellung von Text oder Bildern, die es dem Benutzer ermöglicht, schnell zu navigieren und relevante Informationen abzurufen. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` Beispiel: ```html Unterüberschrift Item 1 Item 2 ``` ## Beispiele {#examples} ### Textinhalt {#example-text} Setzen Sie das Attribut `headline` auf der ``-Komponente, um den Haupttext des Listenelements festzulegen. Setzen Sie das Attribut `description`, um den Nebentext festzulegen. ```html ``` Sie können den Haupttext auch über den default Slot und den Nebentext über den `description` Slot festlegen. ```html Überschrift Überschrift Unterstützender Text ``` Standardmäßig werden Haupt- und Nebentext unabhängig von ihrer Länge vollständig angezeigt. Sie können die Attribute `headline-line` und `description-line` verwenden, um die maximale Anzahl der Zeilen für Haupt- und Nebentext zu begrenzen (maximal 3 Zeilen). ```html Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Überschrift Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text Unterstützender Text ``` ### Seitlicher Inhalt {#example-side} Setzen Sie die Attribute `icon` und `end-icon` auf der ``-Komponente, um links bzw. rechts vom Listenelement ein Material Icons-Symbol hinzuzufügen. ```html Überschrift ``` Sie können auch über die Slots `icon` und `end-icon` Elemente hinzufügen. ```html Überschrift ``` ### Link {#example-link} Setzen Sie das Attribut `href`, um das Listenelement in einen Link zu verwandeln. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html Überschrift ``` ### Deaktivierter Zustand {#example-disabled} Mit dem Attribut `disabled` auf der ``-Komponente deaktivieren Sie das Listenelement. Dadurch werden auch Komponenten wie Checkbox, Radio, Switch innerhalb des Listenelements deaktiviert. ```html Überschrift Überschrift ``` ### Aktiver Zustand {#example-active} Mit dem Attribut `active` auf der ``-Komponente aktivieren Sie das Listenelement. ```html Überschrift Überschrift ``` ### Nicht anklickbarer Zustand {#example-nonclickable} Mit dem Attribut `nonclickable` auf der ``-Komponente entfernen Sie den Maus-Hover- und Klick-Wellen-Effekt. ```html Überschrift Überschrift ``` ### Abgerundete Form {#example-rounded} Mit dem Attribut `rounded` auf der ``-Komponente wird das Listenelement abgerundet dargestellt. ```html Überschrift Überschrift ``` ### Vertikale Ausrichtung {#example-alignment} Setzen Sie das Attribut `alignment` auf der ``-Komponente, um die Ausrichtung der seitlichen Elemente relativ zum Listenelement festzulegen. Mögliche Werte sind: - `start`: Oben ausrichten - `center`: Zentriert ausrichten - `end`: Unten ausrichten ```html Überschrift Überschrift Überschrift ``` ### Benutzerdefinierter Inhalt {#example-custom} Verwenden Sie den Slot `custom` in der ``-Komponente, um den Inhalt des Listenelements vollständig anzupassen. ```html
test
 ``` ## mdui-list-item API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
headline headline true string

Haupttext. Alternativ können Sie den Standard-Slot verwenden.
headline-line headlineLine true 1 | 2 | 3

Maximale Anzahl von Zeilen für den Haupttext. Überlaufender Text wird abgeschnitten. Standard ist keine Begrenzung. Mögliche Werte:

  • 1: Einzeiliger Text, der bei Überlauf abgeschnitten wird.
  • 2: Zweizeiliger Text, der bei Überlauf abgeschnitten wird.
  • 3: Dreizeiliger Text, der bei Überlauf abgeschnitten wird.
description description true string

Untertext. Alternativ können Sie slot="description" verwenden.
description-line descriptionLine true 1 | 2 | 3

Maximale Anzahl von Zeilen für den Untertext. Überlaufender Text wird abgeschnitten. Standard ist keine Begrenzung. Mögliche Werte:

  • 1: Einzeiliger Text, der bei Überlauf abgeschnitten wird.
  • 2: Zweizeiliger Text, der bei Überlauf abgeschnitten wird.
  • 3: Dreizeiliger Text, der bei Überlauf abgeschnitten wird.
icon icon true string

Name des Material Icons auf der linken Seite. Alternativ können Sie slot="icon" verwenden.
end-icon endIcon true string

Name des Material Icons auf der rechten Seite. Alternativ können Sie slot="end-icon" verwenden.
disabled disabled true boolean false

Deaktiviert das Listenelement. Es dimmt das Listenelement und deaktiviert interaktive Elemente wie <mdui-checkbox>, <mdui-radio> und <mdui-switch>.
active active true boolean false

Markiert das Listenelement als aktiv.
nonclickable nonclickable true boolean false

Deaktiviert die standardmäßige Klickaktion des Listenelements, aber interaktive Elemente wie <mdui-checkbox>, <mdui-radio> und <mdui-switch> darin bleiben funktionsfähig.
rounded rounded true boolean false

Verleiht dem Listenelement ein abgerundetes Aussehen.
alignment alignment true 'start' | 'center' | 'end' 'center'

Vertikale Ausrichtung des Listenelements. Mögliche Werte:

  • start: Oben ausrichten.
  • center: Zentriert ausrichten.
  • end: Unten ausrichten.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn das Listenelement den Fokus erhält.
blur

Wird ausgelöst, wenn das Listenelement den Fokus verliert.
### Slots
Name Beschreibung
Standard

Haupttext.
description

Untertext.
icon

Element links vom Listenelement.
end-icon

Element rechts vom Listenelement.
custom

Beliebiger eigener Inhalt.
### CSS Parts
Name Beschreibung
container

Container des Listenelements.
icon

Linkes Icon.
end-icon

Rechtes Icon.
body

Mittlerer Abschnitt.
headline

Haupttitel.
description

Untertitel.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der Eckradius der Komponente, wenn rounded angegeben ist. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
## mdui-list-subheader API ### Slots
Name Beschreibung
Standard

Untertitel-Text.
## mdui-list API ### Slots
Name Beschreibung
Standard

Enthält <mdui-list-item>-Elemente.
# Menü-Komponente Die Menü-Komponente bietet eine vertikale Liste von Optionen. Das Menü wird angezeigt, wenn der Benutzer mit einem Button oder anderen Bedienelementen interagiert. Wenn Sie ein Dropdown-Menü implementieren möchten, können Sie die [``](/de/docs/2/components/dropdown)-Komponente verwenden. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Beispiel: ```html Item 1 Item 2 ``` ## Beispiele {#examples} ### Dropdown-Menü {#example-dropdown} Verwenden Sie die [``](/de/docs/2/components/dropdown)-Komponente für ein Dropdown-Menü. ```html Dropdown öffnen Item 1 Item 2 ``` ### Kompaktes Layout {#example-dense} Fügen Sie das Attribut `dense` zur ``-Komponente hinzu, um ein kompaktes Layout zu erreichen. ```html Item 1 Item 2 Item 3 ``` ### Deaktivierte Menüpunkte {#example-disabled} Fügen Sie das Attribut `disabled` zur ``-Komponente hinzu, um einen Menüpunkt zu deaktivieren. ```html Item 1 Item 2 Item 3 ``` ### Einfachauswahl unterstützen {#example-selects-single} Setzen Sie das Attribut `selects` auf `single` in der ``-Komponente, um die Einfachauswahl zu aktivieren. Der `value`-Wert von `` ist dann der `value`-Wert des aktuell ausgewählten ``. ```html Item 1 Item 2 ``` ### Mehrfachauswahl unterstützen {#example-selects-multiple} Setzen Sie das Attribut `selects` auf `multiple` in der ``-Komponente, um die Mehrfachauswahl zu aktivieren. Der `value`-Wert von `` ist dann ein Array der `value`-Werte der aktuell ausgewählten ``. Hinweis: Im Mehrfachauswahl-Modus ist der `value`-Wert von `` ein Array, das nur über eine JavaScript-Property gelesen und gesetzt werden kann. ```html Item 1 Item 2 Item 3 ``` ### Symbol {#example-icon} Über die Attribute `icon` und `end-icon` auf der ``-Komponente können Sie links bzw. rechts vom Menüpunkt ein Material Icons-Symbol hinzufügen. Mit dem Attribut `end-text` können Sie rechts Text hinzufügen. Sie können auch über die Slots `icon`, `end-icon` und `end-text` Elemente hinzufügen. Wenn Sie links Platz für ein Symbol freihalten möchten, um die Ausrichtung mit anderen Menüpunkten beizubehalten, setzen Sie das Attribut `icon` auf einen leeren String. ```html Item 1 Item 2 Strg+X Item 3 ``` Im Einfach- oder Mehrfachauswahl-Modus können Sie das Symbol für den ausgewählten Zustand mit dem Attribut `selected-icon` oder dem Slot `selected-icon` festlegen. ```html Item 1 Item 2 ``` ### Link {#example-link} Setzen Sie das Attribut `href` auf der ``-Komponente, um den Menüpunkt in einen Link zu verwandeln. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html Item 1 Item 2 ``` ### Untermenü {#example-submenu} In der ``-Komponente können Sie über den Slot `submenu` die Elemente für das Untermenü angeben. ```html Zeilenabstand Einfach 1,5 Doppelt Benutzerdefiniert: 1,2 Absatzstil ``` In der ``-Komponente können Sie mit dem Attribut `submenu-trigger` festlegen, wie das Untermenü ausgelöst wird. ```html Zeilenabstand Einfach 1,5 Doppelt Benutzerdefiniert: 1,2 Absatzstil ``` Wenn `submenu-trigger` auf `hover` gesetzt ist, können Sie mit den Attributen `submenu-open-delay` und `submenu-close-delay` in der ``-Komponente die Verzögerung beim Öffnen und Schließen des Untermenüs festlegen. ```html Zeilenabstand Einfach 1,5 Doppelt Benutzerdefiniert: 1,2 Absatzstil ``` ### Benutzerdefinierter Inhalt {#example-custom} In der ``-Komponente können Sie den Slot `custom` verwenden, um den Inhalt des Menüpunkts vollständig anzupassen. ```html
ABS
Gibt den absoluten Wert einer Zahl zurück
ACOS
Gibt den Arkuskosinus einer Zahl im Bogenmaß zurück
ACOSH
Gibt den Areakosinus hyperbolicus einer Zahl zurück
 ``` ## mdui-menu-item API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value true string

Der Wert des Menüpunkts.
disabled disabled true boolean false

Deaktiviert den Menüpunkt.
icon icon true string

Gibt den Namen des Material Icons für das linke Icon an. Alternativ können Sie slot="icon" verwenden. Eine leere Zeichenfolge reserviert Platz für ein Icon.
end-icon endIcon true string

Gibt den Namen des Material Icons für das rechte Icon an. Alternativ können Sie slot="end-icon" verwenden.
end-text endText true string

Gibt den rechten Text an. Alternativ können Sie slot="end-text" verwenden.
selected-icon selectedIcon true string

Gibt den Namen des Material Icons für den ausgewählten Zustand an. Alternativ können Sie slot="selected-icon" verwenden.
submenu-open submenuOpen true boolean false

Öffnet das Untermenü.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn der Menüpunkt den Fokus erhält.
blur

Wird ausgelöst, wenn der Menüpunkt den Fokus verliert.
submenu-open

Wird ausgelöst, wenn das Untermenü beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
submenu-opened

Wird ausgelöst, nachdem das Untermenü geöffnet wurde und die Animationen abgeschlossen sind.
submenu-close

Wird ausgelöst, wenn das Untermenü beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
submenu-closed

Wird ausgelöst, nachdem das Untermenü geschlossen wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Menüpunkt-Text.
icon

Linkes Icon.
end-icon

Rechtes Icon.
end-text

Rechter Text.
selected-icon

Icon für den ausgewählten Zustand.
submenu

Untermenü.
custom

Beliebiger benutzerdefinierter Inhalt.
### CSS Parts
Name Beschreibung
container

Container des Menüpunkts.
icon

Linkes Icon.
label

Textinhalt.
end-icon

Rechtes Icon.
end-text

Rechter Text.
selected-icon

Icon für den ausgewählten Zustand.
submenu

Untermenü-Punkt.
## mdui-menu API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
selects selects true 'single' | 'multiple'

Steuert, ob Menüpunkte ausgewählt werden können. Standardmäßig sind sie nicht auswählbar. Mögliche Werte:

  • single: Es kann jeweils nur ein Menüpunkt ausgewählt werden.
  • multiple: Es können mehrere Menüpunkte ausgewählt werden.
value value false string | string[]

Der Wert des ausgewählten <mdui-menu-item>.

Hinweis: Das HTML-Attribut akzeptiert immer eine Zeichenfolge und kann nur als Anfangswert verwendet werden, wenn selects="single". Die JavaScript-Eigenschaft ist eine Zeichenfolge, wenn selects="single", und ein Array von Zeichenfolgen, wenn selects="multiple". Wenn selects="multiple", aktualisieren Sie die JavaScript-Eigenschaft, um diesen Wert zu ändern.
dense dense true boolean false

Gibt an, ob die Menüpunkte ein kompaktes Layout verwenden.
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

Definiert, wie Untermenüs geöffnet werden. Mehrere durch Leerzeichen getrennte Werte werden unterstützt. Mögliche Werte:

  • click: Öffnet das Untermenü, wenn auf den Menüpunkt geklickt wird.
  • hover: Öffnet das Untermenü, wenn mit der Maus über einen Menüpunkt gefahren wird.
  • focus: Öffnet das Untermenü, wenn der Menüpunkt den Fokus erhält.
  • manual: Untermenüs können nur programmgesteuert geöffnet und geschlossen werden; es können keine anderen Auslösemethoden angegeben werden.
submenu-open-delay submenuOpenDelay true number 200

Die Verzögerung (in Millisekunden), bevor ein Untermenü bei Mouseover geöffnet wird.
submenu-close-delay submenuCloseDelay true number 200

Die Verzögerung (in Millisekunden), bevor ein Untermenü bei Mouseover geschlossen wird.
### Methoden
Name Beschreibung
focus(options?: FocusOptions): void

Setzt den Fokus auf das Element.
blur(): void

Entfernt den Fokus vom Element.
### Ereignisse
Name Beschreibung
change

Wird ausgelöst, wenn sich der ausgewählte Zustand von Menüpunkten ändert.
### Slots
Name Beschreibung
Standard

Untermenü-Punkte (<mdui-menu-item>), Trennlinien (<mdui-divider>) und andere Elemente.
### CSS Custom Property
Name Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Navigation Bar-Komponente Die Navigation Bar erleichtert auf Mobilgeräten den Wechsel zwischen verschiedenen Hauptseiten. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` Beispiel: (Das `style="position: relative"` im Beispiel dient nur zur Veranschaulichung; entfernen Sie dieses Stilattribut in echten Projekten.) ```html Item 1 Item 2 Item 3 ``` **Wichtige Hinweise:** Diese Komponente verwendet standardmäßig die Positionierung `position: fixed` und fügt automatisch `padding-bottom` zum `body` hinzu, um zu verhindern, dass Seiteninhalte von dieser Komponente verdeckt werden. In den folgenden zwei Fällen wird jedoch standardmäßig die Positionierung `position: absolute` verwendet: 1. Wenn das Attribut `scroll-target` angegeben ist. In diesem Fall wird `padding-bottom` zum Element `scroll-target` hinzugefügt. 2. Wenn sich die Komponente innerhalb von [``](/de/docs/2/components/layout) befindet. In diesem Fall wird kein `padding-bottom` hinzugefügt. ## Beispiele {#examples} ### Anzeige der Beschriftung {#example-label-visibility} Die Beschriftung in der Navigation Bar wird standardmäßig immer angezeigt, wenn die Anzahl der Navigationselemente kleiner oder gleich 3 ist. Bei mehr als 3 Navigationselementen wird der Text nur für das ausgewählte Element angezeigt. ```html Item 1 Item 2 Item 3
Item 1 Item 2 Item 3 Item 4 ``` Sie können das Attribut `label-visibility` auf der ``-Komponente verwenden, um die Anzeige der Beschriftung anzupassen. Mögliche Werte sind: - `selected`: Nur die Beschriftung des ausgewählten Elements anzeigen - `labeled`: Beschriftung immer anzeigen - `unlabeled`: Beschriftung nie anzeigen ```html Item 1 Item 2 Item 3 ausgewählt beschriftet unbeschriftet ``` ### Innerhalb eines angegebenen Containers {#example-scroll-target} Standardmäßig wird die Navigation Bar unten im aktuellen Fenster angezeigt. Wenn Sie die Navigation Bar in einem bestimmten Container platzieren möchten, geben Sie auf der ``-Komponente das Attribut `scroll-target` an. Der Wert kann ein CSS-Selektor oder ein DOM-Element des scrollbaren Inhaltscontainers sein. In diesem Fall wird die Navigation Bar relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile `position: relative; overflow: hidden` hinzufügen). ```html
Item 1 Item 2 Item 3
Seiteninhalt
``` ### Beim Scrollen ausblenden {#example-scroll-behavior} Setzen Sie das Attribut `scroll-behavior` auf `hide` in der ``-Komponente, um die Navigation Bar beim Scrollen nach unten auszublenden und beim Scrollen nach oben wieder einzublenden. Mit dem Attribut `scroll-threshold` können Sie festlegen, wie viele Pixel gescrollt werden müssen, bevor die Navigation Bar ausgeblendet wird. ```html
Item 1 Item 2 Item 3
Seiteninhalt
``` ### Symbol {#example-icon} Bei der ``-Komponente legt das Attribut `icon` den Namen des Symbols für den nicht-aktivierten Zustand fest. Das Attribut `active-icon` legt den Namen des Symbols für den aktivierten Zustand fest. Sie können die Symbolelemente für beide Zustände auch über die Slots `icon` und `active-icon` festlegen. ```html Item 1 Item 2 ``` ### Link {#example-link} Setzen Sie das Attribut `href` auf der ``-Komponente, um das Navigationselement in einen Link zu verwandeln. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html Item 1 Item 2 ``` ### Badge {#example-badge} In der ``-Komponente können Sie über den Slot `badge` ein Badge hinzufügen. ```html Item 1 99+ Item 2 ``` ## mdui-navigation-bar-item API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
icon icon true string

Gibt den Namen des Material Icons für den inaktiven Zustand an. Alternativ können Sie slot="icon" verwenden.
active-icon activeIcon true string

Gibt den Namen des Material Icons für den aktiven Zustand an. Alternativ können Sie slot="active-icon" verwenden.
value value true string

Der Wert des Navigationselements.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn das Navigation Bar Item den Fokus erhält.
blur

Wird ausgelöst, wenn das Navigation Bar Item den Fokus verliert.
### Slots
Name Beschreibung
Standard

Text.
icon

Icon.
active-icon

Icon für den aktiven Zustand.
badge

Badge.
### CSS Parts
Name Beschreibung
container

Container für das Navigationselement.
indicator

Indikator.
badge

Badge.
icon

Icon.
active-icon

Icon für den aktiven Zustand.
label

Text.
### CSS Custom Property
Name Beschreibung
--shape-corner-indicator

Der Eckradius des Indikators. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
## mdui-navigation-bar API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
hide hide true boolean false

Gibt an, ob die Navigation Bar ausgeblendet ist.
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

Gibt an, wann der Text angezeigt wird. Mögliche Werte:

  • auto: Sichtbar, wenn es 3 oder weniger Elemente gibt; andernfalls nur im ausgewählten Zustand sichtbar.
  • selected: Nur im ausgewählten Zustand sichtbar.
  • labeled: Immer sichtbar.
  • unlabeled: Nie sichtbar.
value value true string

Der Wert des ausgewählten <mdui-navigation-bar-item>.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Definiert das Scroll-Verhalten. Mögliche Werte:

  • hide: Wird beim Scrollen ausgeblendet.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Das auf Scroll-Ereignisse zu überwachende Element. Akzeptiert einen CSS-Selektor, ein DOM-Element oder ein JQ-Objekt. Standardwert ist window.
scroll-threshold scrollThreshold true number

Die Scroll-Distanz (in Pixeln), die erforderlich ist, um das Scroll-Verhalten auszulösen.
order order true number

Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
### Ereignisse
Name Beschreibung
change

Wird ausgelöst, wenn sich der Wert ändert.
show

Wird ausgelöst, wenn die Navigation Bar beginnt, sich anzuzeigen. Kann mit event.preventDefault() verhindert werden.
shown

Wird ausgelöst, nachdem die Navigation Bar angezeigt wurde und die Animationen abgeschlossen sind.
hide

Wird ausgelöst, wenn die Navigation Bar beginnt, sich auszublenden. Kann mit event.preventDefault() verhindert werden.
hidden

Wird ausgelöst, nachdem die Navigation Bar ausgeblendet wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Enthält <mdui-navigation-bar-item>-Komponenten.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# Navigation Drawer-Komponente Der Navigation Drawer bietet eine seitliche Navigation, mit der Benutzer schnell auf verschiedene Seiten oder Inhalte zugreifen können. Normalerweise können Sie die [``](/de/docs/2/components/list)-Komponente verwenden, um Navigationselemente im Navigation Drawer hinzuzufügen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/navigation-drawer.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` Beispiel: ```html Navigation Drawer schließen Navigation Drawer öffnen ``` **Wichtige Hinweise:** Diese Komponente verwendet standardmäßig die Positionierung `position: fixed`. Wenn `modal` auf `false` gesetzt ist und die Bildschirmgröße größer oder gleich [`--mdui-breakpoint-md`](/de/docs/2/styles/design-tokens#breakpoint) ist, wird automatisch `padding-left` oder `padding-right` zum `body` hinzugefügt, um zu verhindern, dass Seiteninhalte von dieser Komponente verdeckt werden. In den folgenden zwei Fällen wird jedoch standardmäßig die Positionierung `position: absolute` verwendet: 1. Wenn das Attribut `contained` auf `true` gesetzt ist. 2. Wenn sich die Komponente innerhalb von [``](/de/docs/2/components/layout) befindet. In diesem Fall wird kein `padding-left` oder `padding-right` hinzugefügt. ## Beispiele {#examples} ### Innerhalb eines angegebenen Containers {#example-contained} Standardmäßig wird der Navigation Drawer links oder rechts im aktuellen Fenster angezeigt. Wenn Sie den Navigation Drawer in einem bestimmten Container platzieren möchten, können Sie das Attribut `contained` hinzufügen. In diesem Fall wird der Navigation Drawer relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile `position: relative; overflow: hidden;` hinzufügen). ```html
Navigation Drawer schließen
Navigation Drawer öffnen
``` ### Modal {#example-modal} Fügen Sie das Attribut `modal` hinzu, um beim Öffnen des Navigation Drawer eine Overlay-Schicht anzuzeigen. Beachten Sie, dass diese Einstellung ignoriert wird, wenn die Fenster- oder übergeordnete Elementbreite kleiner als [`--mdui-breakpoint-md`](/de/docs/2/styles/design-tokens#breakpoint) ist. In diesem Fall wird immer eine Overlay-Schicht angezeigt. Fügen Sie das Attribut `close-on-esc` hinzu, um den Navigation Drawer durch Drücken der ESC-Taste zu schließen. Fügen Sie das Attribut `close-on-overlay-click` hinzu, um den Navigation Drawer durch Klick auf die Overlay-Schicht zu schließen. ```html
Navigation Drawer schließen
Navigation Drawer öffnen
``` ### Rechts positionieren {#example-placement} Setzen Sie das Attribut `placement` auf `right`, um den Navigation Drawer auf der rechten Seite der Seite anzuzeigen. ```html
Navigation Drawer schließen
Navigation Drawer öffnen
``` ## mdui-navigation-drawer API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
open open true boolean false

Öffnet den Navigation Drawer.
modal modal true boolean false

Zeigt ein Overlay an, wenn geöffnet.

Auf schmalen Geräten (Bildschirmbreite < --mdui-breakpoint-md) wird das Overlay immer angezeigt.
close-on-esc closeOnEsc true boolean false

Schließt den Drawer, wenn die ESC-Taste gedrückt wird und ein Overlay vorhanden ist.
close-on-overlay-click closeOnOverlayClick true boolean false

Schließt den Drawer, wenn auf das Overlay geklickt wird.
placement placement true 'left' | 'right' 'left'

Legt die Position des Drawers fest. Mögliche Werte:

  • left: Wird auf der linken Seite angezeigt.
  • right: Wird auf der rechten Seite angezeigt.
contained contained true boolean false

Standardmäßig wird der Navigation Drawer relativ zum body-Element positioniert. Wenn gesetzt, wird er relativ zu seinem übergeordneten Element positioniert.

Hinweis: Sie müssen manuell position: relative; overflow: hidden; auf dem übergeordneten Element setzen, wenn dieses Attribut gesetzt ist.
order order true number

Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
### Ereignisse
Name Beschreibung
open

Wird ausgelöst, wenn der Navigation Drawer beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
opened

Wird ausgelöst, nachdem der Navigation Drawer geöffnet wurde und die Animationen abgeschlossen sind.
close

Wird ausgelöst, wenn der Navigation Drawer beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
closed

Wird ausgelöst, nachdem der Navigation Drawer geschlossen wurde und die Animationen abgeschlossen sind.
overlay-click

Wird ausgelöst, wenn auf das Overlay geklickt wird.
### Slots
Name Beschreibung
Standard

Inhalt des Navigation Drawer.
### CSS Parts
Name Beschreibung
overlay

Overlay-Element.
panel

Container für den Navigation Drawer.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# Navigation Rail-Komponente Die Navigation Rail bietet auf Tablets und Desktop-Computern schnellen Zugriff auf verschiedene Hauptseiten. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` Beispiel: (Das `style="position: relative"` im Beispiel dient nur zur Veranschaulichung; entfernen Sie dieses Stilattribut in echten Projekten.) ```html Recent Images Library ``` **Wichtige Hinweise:** Diese Komponente verwendet standardmäßig die Positionierung `position: fixed` und fügt automatisch `padding-left` oder `padding-right` zum `body` hinzu, um zu verhindern, dass Seiteninhalte von dieser Komponente verdeckt werden. In den folgenden zwei Fällen wird jedoch standardmäßig die Positionierung `position: absolute` verwendet: 1. Wenn das Attribut `contained` der ``-Komponente auf `true` gesetzt ist. In diesem Fall wird `padding-left` oder `padding-right` zum übergeordneten Element hinzugefügt. 2. Wenn sie sich innerhalb von [``](/de/docs/2/components/layout) befindet. In diesem Fall wird kein `padding-left` oder `padding-right` hinzugefügt. ## Beispiele {#examples} ### Innerhalb eines angegebenen Containers {#example-contained} Standardmäßig wird die Navigation Rail links oder rechts im aktuellen Fenster angezeigt. Wenn Sie die Navigation Rail in einem bestimmten Container platzieren möchten, können Sie der ``-Komponente das Attribut `contained` hinzufügen. In diesem Fall wird die Navigation Rail relativ zu ihrem übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst den Stil `position: relative` hinzufügen). ```html
Recent Images Library
Seiteninhalt
``` ### Rechts positionieren {#example-placement} Setzen Sie das Attribut `placement` auf `right` in der ``-Komponente, um die Navigation Rail auf der rechten Seite anzuzeigen. ```html
Recent Images Library
Seiteninhalt
``` ### Trennlinie anzeigen {#example-divider} Fügen Sie das Attribut `divider` zur ``-Komponente hinzu, um eine Trennlinie an der Navigation Rail anzuzeigen und sie so vom Seiteninhalt zu unterscheiden. ```html
Recent Images Library
Seiteninhalt
``` ### Elemente oben/unten hinzufügen {#example-top-bottom} Sie können über die Slots `top` und `bottom` innerhalb der ``-Komponente Elemente oben und unten hinzufügen. ```html
Recent Images Library
Seiteninhalt
``` ### Vertikale Ausrichtung der Navigationselemente {#example-alignment} Setzen Sie das Attribut `alignment` der ``-Komponente, um die vertikale Ausrichtung der Navigationselemente zu ändern. ```html
Recent Images Library
start center end
``` ### Symbol {#example-icon} Bei der ``-Komponente legen Sie mit dem Attribut `icon` das Symbol für den nicht-aktivierten Zustand fest und mit `active-icon` das Symbol für den aktivierten Zustand. Sie können die Symbolelemente für beide Zustände auch über die Slots `icon` und `active-icon` festlegen. ```html
Recent Images Library
Seiteninhalt
``` ### Nur Symbole verwenden {#example-no-label} Die ``-Komponente kann auch nur mit einem Symbol ohne Text verwendet werden. ```html
Seiteninhalt
``` ### Link {#example-link} Setzen Sie das Attribut `href` auf der ``-Komponente, um das Navigationselement in einen Link zu verwandeln. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html
Recent Images Library
Seiteninhalt
``` ### Badge {#example-badge} In der ``-Komponente können Sie über den Slot `badge` ein Badge hinzufügen. ```html
Recent 99+ Images Library
Seiteninhalt
``` ## mdui-navigation-rail-item API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
icon icon true string

Gibt den Namen des Material Icons für den inaktiven Zustand an. Alternativ können Sie slot="icon" verwenden.
active-icon activeIcon true string

Gibt den Namen des Material Icons für den aktiven Zustand an. Alternativ können Sie slot="active-icon" verwenden.
value value true string

Der Wert des Navigationselements.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn das Navigation Rail Item den Fokus erhält.
blur

Wird ausgelöst, wenn das Navigation Rail Item den Fokus verliert.
### Slots
Name Beschreibung
Standard

Text.
icon

Icon.
active-icon

Icon für den aktiven Zustand.
badge

Badge.
### CSS Parts
Name Beschreibung
container

Container für das Navigationselement.
indicator

Indikator.
badge

Badge.
icon

Icon.
active-icon

Icon für den aktiven Zustand.
label

Text.
### CSS Custom Property
Name Beschreibung
--shape-corner-indicator

Der Eckradius des Indikators. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
## mdui-navigation-rail API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value true string

Der Wert des ausgewählten <mdui-navigation-rail-item>.
placement placement true 'left' | 'right' 'left'

Legt die Position der Navigation Rail fest. Mögliche Werte:

  • left: Wird links angezeigt.
  • right: Wird rechts angezeigt.
alignment alignment true 'start' | 'center' | 'end' 'start'

Legt die Ausrichtung der <mdui-navigation-rail-item>-Elemente fest. Mögliche Werte:

  • start: Oben ausrichten.
  • center: Zentriert ausrichten.
  • end: Unten ausrichten.
contained contained true boolean false

Standardmäßig wird die Navigation Rail relativ zum body-Element positioniert. Wenn gesetzt, wird sie relativ zu ihrem übergeordneten Element positioniert.

Hinweis: Sie müssen manuell position: relative; auf dem übergeordneten Element setzen, wenn dieses Attribut gesetzt ist.
divider divider true boolean false

Fügt eine Trennlinie zwischen der Navigation Rail und dem Seiteninhalt hinzu.
order order true number

Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
### Ereignisse
Name Beschreibung
change

Wird ausgelöst, wenn sich der Wert ändert.
### Slots
Name Beschreibung
Standard

Enthält <mdui-navigation-rail-item>-Komponenten.
top

Oberes Element.
bottom

Unteres Element.
### CSS Parts
Name Beschreibung
top

Container für das obere Element.
bottom

Container für das untere Element.
items

Container für <mdui-navigation-rail-item>-Komponenten.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# Radio-Komponente Radios ermöglichen die Auswahl einer Option aus einer Gruppe. Es kann immer nur eine Option ausgewählt sein. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` Beispiel: ```html Chinesisch Englisch ``` ## Beispiele {#examples} ### Ausgewählter Zustand {#example-checked} Der `value`-Wert der ``-Komponente ist der `value`-Wert des aktuell ausgewählten ``-Elements. Sie können auch den aktuell ausgewählten Radio-Button ändern, indem Sie den `value`-Wert der ``-Komponente aktualisieren. ```html Chinesisch Englisch ``` Sie können die ``-Komponente auch einzeln verwenden. In diesem Fall können Sie den ausgewählten Zustand über das Attribut `checked` lesen und ändern. ```html Radio ``` ### Deaktivierter Zustand {#example-disabled} Fügen Sie das Attribut `disabled` zur ``-Komponente hinzu, um die gesamte Radio-Gruppe zu deaktivieren. ```html Chinesisch Englisch ``` Wenn Sie nur bestimmte Radios deaktivieren möchten, fügen Sie das Attribut `disabled` zur ``-Komponente hinzu. ```html Chinesisch Englisch ``` ### Symbol {#example-icon} Sie können über die Attribute `unchecked-icon` und `checked-icon` die Material Icons-Symbole für den nicht ausgewählten und ausgewählten Zustand des Radios festlegen. Sie können dies auch über die Slots `unchecked-icon` und `checked-icon` tun. ```html Chinesisch Englisch ``` ## mdui-radio-group API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
disabled disabled true boolean false

Deaktiviert die Radio Group.
form form true string

Verknüpft die Radio Group mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Radio Group ihr übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es der Radio Group, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
name name true string ''

Der Name der Radio Group, der mit Formulardaten übermittelt wird.
value value true string ''

Der Wert des ausgewählten Radio-Buttons, der mit Formulardaten übermittelt wird.
undefined defaultValue false string ''

Der standardmäßig ausgewählte Wert. Die Radio Group setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
required required true boolean false

Erfordert eine Radio-Auswahl, wenn das Formular gesendet wird.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
### Methoden
Name Beschreibung
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 Beschreibung
change

Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
input

Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
invalid

Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
### Slots
Name Beschreibung
Standard

<mdui-radio>-Elemente.
## mdui-radio API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value true string ''

Gibt den Wert des Radios an.
disabled disabled true boolean false

Deaktiviert das Radio.
checked checked true boolean false

Setzt das Radio in den aktivierten Zustand.
unchecked-icon uncheckedIcon true string

Gibt den Namen des Material Icons für den nicht aktivierten Zustand an. Alternativ können Sie slot="unchecked-icon" verwenden.
checked-icon checkedIcon true string

Gibt den Namen des Material Icons für den aktivierten Zustand an. Alternativ können Sie slot="checked-icon" verwenden.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn das Radio den Fokus erhält.
blur

Wird ausgelöst, wenn das Radio den Fokus verliert.
change

Wird ausgelöst, wenn das Radio ausgewählt wird.
### Slots
Name Beschreibung
Standard

Textinhalt.
unchecked-icon

Icon für den nicht aktivierten Zustand.
checked-icon

Icon für den aktivierten Zustand.
### CSS Parts
Name Beschreibung
control

Container für das linke Icon.
unchecked-icon

Icon für den nicht aktivierten Zustand.
checked-icon

Icon für den aktivierten Zustand.
label

Textinhalt.
# Range Slider-Komponente Die Range Slider-Komponente ermöglicht es Benutzern, einen Bereich aus einer Reihe von Werten auszuwählen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/range-slider.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Standardwert {#example-value} Über das Attribut `value` können Sie den aktuellen Wert des Range Sliders lesen oder setzen. Der Wert dieses Attributs ist ein Array und kann nur über eine JavaScript-Property gelesen und gesetzt werden. ```html ``` ### Deaktivierter Zustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um den Range Slider zu deaktivieren. ```html ``` ### Bereich {#example-min-max} Verwenden Sie die Attribute `min` und `max`, um die Minimal- und Maximalwerte des Range Sliders festzulegen. ```html ``` ### Schrittweite {#example-step} Verwenden Sie das Attribut `step`, um die Schrittweite des Range Sliders festzulegen. ```html ``` ### Skalenstriche {#example-tickmarks} Fügen Sie das Attribut `tickmarks` hinzu, um Skalenstriche auf dem Range Slider anzuzeigen. ```html ``` ### Textbeschriftung ausblenden {#example-nolabel} Fügen Sie das Attribut `nolabel` hinzu, um die Textbeschriftung auf dem Range Slider auszublenden. ```html ``` ### Textbeschriftung anpassen {#example-labelFormatter} Über die JavaScript-Property `labelFormatter` können Sie das Anzeigeformat der Textbeschriftung anpassen. Diese Property ist eine Funktion, die den aktuellen Wert des Range Sliders als Parameter erhält und den anzuzeigenden Text zurückgibt. ```html ``` ## mdui-range-slider API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
undefined defaultValue false number[] []

Gibt den Standardwert an. Der Schieberegler setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
undefined value false number[]

Gibt den Wert des Schiebereglers als Array an. Dieser Wert wird mit Formulardaten übermittelt.

Hinweis: Dieser Wert kann nicht initial über ein HTML-Attribut gesetzt werden. Verwenden Sie die JavaScript-Eigenschaft, um ihn zu ändern.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
min min true number 0

Gibt den Mindestwert an. Standard ist 0.
max max true number 100

Gibt den Höchstwert an. Standard ist 100.
step step true number 1

Gibt das Schrittintervall an. Standard ist 1.
tickmarks tickmarks true boolean false

Fügt dem Schieberegler Skalenstriche hinzu.
nolabel nolabel true boolean false

Blendet die Wertbeschriftung aus.
disabled disabled true boolean false

Deaktiviert den Schieberegler.
form form true string

Verknüpft den Schieberegler mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Schieberegler sein übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es dem Schieberegler, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem er verschachtelt ist.
name name true string ''

Gibt den Namen des Schiebereglers an, der mit Formulardaten übermittelt wird.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
undefined labelFormatter false (value: number) => string

Gibt eine Funktion an, die den Wert des Tooltips formatiert. Die Funktion erhält den Wert des Schiebereglers als Argument und sollte eine Zeichenfolge zurückgeben, die im Tooltip angezeigt wird.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
focus

Wird ausgelöst, wenn der Bereichs-Schieberegler den Fokus erhält.
blur

Wird ausgelöst, wenn der Bereichs-Schieberegler den Fokus verliert.
change

Wird ausgelöst, wenn sich der Wert ändert und der Bereichs-Schieberegler den Fokus verliert.
input

Wird ausgelöst, wenn sich der Wert ändert.
invalid

Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
### CSS Parts
Name Beschreibung
track-inactive

Spur für den inaktiven Zustand.
track-active

Spur für den aktiven Zustand.
handle

Griff zur Interaktion.
label

Wertbeschriftung.
tickmark

Skalenstrich.
# Select-Komponente Die Select-Komponente zeigt Optionen in einem Dropdown-Menü an und erleichtert so die Auswahl für Nutzer. Diese Seite beschreibt hauptsächlich die Verwendung der ``-Komponente. Informationen zur Verwendung von Menüpunkten finden Sie unter [``](/de/docs/2/components/menu#menu-item-api). ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` Beispiel: ```html Item 1 Item 2 ``` ## Beispiele {#examples} ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form des Select-Elements. ```html Item 1 Item 2 Item 1 Item 2 ``` ### Mehrfachauswahl unterstützen {#example-multiple} Das Select-Element ist standardmäßig auf Einfachauswahl eingestellt. Der `value`-Wert der ``-Komponente ist der `value`-Wert des aktuell ausgewählten [``](/de/docs/2/components/menu#menu-item-api). Fügen Sie das Attribut `multiple` hinzu, um die Mehrfachauswahl zu aktivieren. In diesem Fall ist der `value`-Wert von `` ein Array der `value`-Werte der aktuell ausgewählten [``](/de/docs/2/components/menu#menu-item-api). Hinweis: Bei aktivierter Mehrfachauswahl ist der `value`-Wert von `` ein Array, das nur über eine JavaScript-Property gelesen und gesetzt werden kann. ```html Item 1 Item 2 Item 3 ``` ### Hilfstext {#example-helper-text} Mit dem Attribut `label` legen Sie den Label-Text über dem Select-Element fest. ```html Item 1 Item 2 ``` Mit dem Attribut `placeholder` legen Sie den Platzhaltertext für nicht ausgewählte Werte fest. ```html Item 1 Item 2 ``` Mit dem Attribut `helper` legen Sie den Hilfetext unter dem Select-Element fest. Sie können den Hilfetext auch über den Slot `helper` festlegen. ```html Item 1 Item 2 Item 1 Item 2 Unterstützender Text ``` ### Nur-Lese-Modus {#example-readonly} Fügen Sie das Attribut `readonly` hinzu, um das Select-Element in den Nur-Lese-Modus zu versetzen. ```html Item 1 Item 2 ``` ### Deaktivierter Zustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um das Select-Element zu deaktivieren. ```html Item 1 Item 2 ``` ### Löschbar {#example-clearable} Wenn Sie das Attribut `clearable` hinzufügen, erscheint rechts neben dem Select-Element eine Schaltfläche zum Löschen, wenn ein Wert ausgewählt ist. ```html Item 1 Item 2 ``` Sie können die Schaltfläche zum Löschen auch über den Slot `clear` anpassen. ```html Item 1 Item 2 ``` ### Position des Dropdown-Menüs {#example-placement} Über das Attribut `placement` können Sie die Position des Dropdown-Menüs festlegen. ```html Item 1 Item 2 ``` ### Text rechtsbündig ausrichten {#example-end-aligned} Fügen Sie das Attribut `end-aligned` hinzu, um den Text rechtsbündig auszurichten. ```html Item 1 Item 2 ``` ### Text und Symbole links/rechts {#example-prefix-suffix} Über die Attribute `icon` und `end-icon` können Sie links bzw. rechts vom Select-Element ein Material Icons-Symbol hinzufügen. Sie können auch über die Slots `icon` und `end-icon` Elemente hinzufügen. ```html Item 1 Item 2

Item 1 Item 2 ``` Über die Attribute `prefix` und `suffix` können Sie links bzw. rechts vom Select-Element Text hinzufügen. Sie können auch über die Slots `prefix` und `suffix` Textelemente hinzufügen. Diese Texte werden nur angezeigt, wenn das Select-Element fokussiert ist oder einen Wert hat. ```html Item 1 Item 2

Item 1 Item 2 $ /100 ``` ## mdui-select API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'filled' | 'outlined' 'filled'

Definiert die Select-Variante. Mögliche Werte:

  • filled: Durchgehender Hintergrund mit starker visueller Betonung.
  • outlined: Mit Rahmen und leichterer visueller Betonung.
multiple multiple true boolean false

Aktiviert Mehrfachauswahl.
name name true string ''

Name der Select-Komponente, der mit Formulardaten übermittelt wird.
value value false string | string[] ''

Wert der Select-Komponente, der mit Formulardaten übermittelt wird.

Wenn multiple nicht gesetzt ist, ist der Wert eine Zeichenfolge; andernfalls ist er ein Array von Zeichenfolgen. HTML-Attribute können nur Zeichenfolgenwerte setzen; Array-Werte müssen über die JavaScript-Eigenschaft gesetzt werden.
undefined defaultValue false string | string[] ''

Standardmäßig ausgewählter Wert. Die Select-Komponente setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
label label true string

Beschriftungstext.
placeholder placeholder true string

Platzhaltertext.
helper helper true string

Hilfetext unter der Select-Komponente. Alternativ können Sie slot="helper" verwenden.
clearable clearable true boolean false

Macht die Select-Komponente löschbar.
clear-icon clearIcon true string

Name des Material Icons für den Löschen-Button rechts, wenn das Feld löschbar ist. Alternativ können Sie slot="clear-icon" verwenden.
placement placement true 'auto' | 'bottom' | 'top' 'auto'

Position der Select-Komponente. Mögliche Werte:

  • auto: Automatisch bestimmt.
  • bottom: Unterhalb des Eingabefelds.
  • top: Oberhalb des Eingabefelds.
end-aligned endAligned true boolean false

Richtet den Text rechtsbündig aus.
prefix prefix true string

Präfix-Text der Select-Komponente. Er wird nur angezeigt, wenn die Select-Komponente fokussiert ist oder einen Wert hat. Alternativ können Sie slot="prefix" verwenden.
suffix suffix true string

Suffix-Text der Select-Komponente. Er wird nur angezeigt, wenn die Select-Komponente fokussiert ist oder einen Wert hat. Alternativ können Sie slot="suffix" verwenden.
icon icon true string

Name des Material Icons für das Präfix-Icon. Alternativ können Sie slot="icon" verwenden.
end-icon endIcon true string

Name des Material Icons für das Suffix-Icon. Alternativ können Sie slot="end-icon" verwenden.
error-icon errorIcon true string

Name des Material Icons, das bei fehlgeschlagener Formularfeldvalidierung rechts angezeigt wird. Alternativ können Sie slot="error-icon" verwenden.
form form true string

Verknüpft die Select-Komponente mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Select-Komponente ihr übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es der Select-Komponente, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
readonly readonly true boolean false

Macht die Select-Komponente schreibgeschützt.
disabled disabled true boolean false

Deaktiviert die Select-Komponente.
required required true boolean false

Erfordert eine Auswahl, wenn das Formular gesendet wird.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
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.
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn die Select-Komponente den Fokus erhält.
blur

Wird ausgelöst, wenn die Select-Komponente den Fokus verliert.
change

Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
invalid

Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
clear

Wird ausgelöst, wenn der Löschen-Button angeklickt wird. Kann mit event.preventDefault() verhindert werden.
### Slots
Name Beschreibung
Standard

<mdui-menu-item>-Elemente.
icon

Linkes Icon.
end-icon

Rechtes Icon.
error-icon

Rechtes Icon bei Validierungsfehler.
prefix

Linker Text.
suffix

Rechter Text.
clear-button

Löschen-Button.
clear-icon

Icon im Löschen-Button.
helper

Hilfetext unten.
### CSS Parts
Name Beschreibung
chips

Container für Options-Chips, wenn multiple aktiviert ist.
chip

Einzelner Chip, der eine Mehrfachauswahl-Option darstellt.
chip__button

Das <button>-Element innerhalb des Chips.
chip__label

Textteil des Chips.
chip__delete-icon

Lösch-Icon innerhalb des Chips.
text-field

Textfeld, d.h. <mdui-text-field>-Element.
text-field__container

Container für das Textfeld.
text-field__icon

Icon innerhalb des Textfelds.
text-field__end-icon

Rechtes Icon innerhalb des Textfelds.
text-field__error-icon

Icon, das bei Validierungsfehler im Textfeld angezeigt wird.
text-field__prefix

Text auf der linken Seite des Textfelds.
text-field__suffix

Text auf der rechten Seite des Textfelds.
text-field__label

Beschriftungstext, der über dem Textfeld angezeigt wird.
text-field__input

Das <input>-Element innerhalb des Textfelds.
text-field__clear-button

Löschen-Button innerhalb des Textfelds.
text-field__clear-icon

Icon im Löschen-Button des Textfelds.
text-field__supporting

Container für unterstützende Informationen am unteren Rand des Textfelds, einschließlich Hilfetext und Fehlermeldungen.
text-field__helper

Hilfetext, der am unteren Rand des Textfelds angezeigt wird.
text-field__error

Fehlermeldung, die am unteren Rand des Textfelds angezeigt wird.
menu

Dropdown-Menü, d.h. <mdui-menu>-Element.
# Segmented Button-Komponente Die Segmented Button-Komponente gruppiert mehrere Buttons, um Optionen bereitzustellen, Ansichten umzuschalten oder Elemente zu sortieren. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` Beispiel: ```html Tag Woche Monat ``` ## Beispiele {#examples} ### Volle Breite {#example-full-width} Fügen Sie das Attribut `full-width` zum ``-Element hinzu, damit die Komponente die volle Breite einnimmt. ```html Tag Woche Monat ``` ### Einfachauswahl-Modus {#example-selects-single} Setzen Sie das Attribut `selects` auf `single` im ``-Element, um den Einfachauswahl-Modus zu aktivieren. Der `value`-Wert von `` ist dann der `value`-Wert des aktuell ausgewählten ``. ```html Tag Woche Monat Tag Woche Monat ``` ### Mehrfachauswahl-Modus {#example-selects-multiple} Setzen Sie das Attribut `selects` auf `multiple` im ``-Element, um den Mehrfachauswahl-Modus zu aktivieren. Der `value`-Wert von `` ist dann ein Array der `value`-Werte der aktuell ausgewählten ``-Elemente. Hinweis: Im Mehrfachauswahl-Modus ist der `value`-Wert von `` ein Array, das nur über eine JavaScript-Property gelesen und gesetzt werden kann. ```html Tag Woche Monat Tag Woche Monat ``` ### Symbol {#example-icon} Im ``-Element: Über die Attribute `icon` und `end-icon` können Sie links bzw. rechts vom Button ein Material Icons-Symbol hinzufügen. Sie können auch über die Slots `icon` und `end-icon` Elemente hinzufügen. ```html Tag Woche Monat ``` Im ``-Element: Über das Attribut `selected-icon` können Sie das Material Icons-Symbol für den ausgewählten Zustand festlegen. Sie können dies auch über den Slot `selected-icon` tun. ```html Tag Woche ``` ### Link {#example-link} Im ``-Element: Mit dem Attribut `href` verwandeln Sie den Button in einen Link. Sie können dann auch die Attribute `download`, `target` und `rel` verwenden. ```html Link Woche Monat ``` ### Deaktivierter und Ladezustand {#example-disabled} Fügen Sie das Attribut `disabled` zum ``-Element hinzu, um die gesamte Gruppe zu deaktivieren. ```html Tag Woche Monat ``` Im ``-Element: Fügen Sie das Attribut `disabled` hinzu, um einen bestimmten Button zu deaktivieren. Fügen Sie das Attribut `loading` hinzu, um einen Ladezustand für einen bestimmten Button anzuzeigen. ```html Tag Woche Monat Jahr ``` ## mdui-segmented-button-group API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
full-width fullWidth true boolean false

Wenn gesetzt, dehnt sich die Segmented Button Group aus, um die Breite ihres Containers auszufüllen.
selects selects true 'single' | 'multiple'

Steuert, ob die Segmented Button Group ausgewählt werden kann. Standardmäßig ist sie nicht auswählbar. Mögliche Werte:

  • single: Es kann nur einer ausgewählt werden.
  • multiple: Mehrfachauswahl ist erlaubt.
disabled disabled true boolean false

Deaktiviert die Segmented Button Group.
required required true boolean false

Erfordert eine Auswahl, wenn das Formular gesendet wird.
form form true string

Verknüpft die Segmented Button Group mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet die Segmented Button Group ihr übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es der Segmented Button Group, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem sie verschachtelt ist.
name name true string ''

Der Name der Segmented Button Group, der mit Formulardaten übermittelt wird.
value value false string | string[] ''

Der Wert des ausgewählten <mdui-segmented-button>. Dieser Wert wird mit Formulardaten übermittelt.

Hinweis: Das HTML-Attribut akzeptiert immer eine Zeichenfolge und kann nur als Anfangswert verwendet werden, wenn selects="single". Die JavaScript-Eigenschaft ist eine Zeichenfolge, wenn selects="single", und ein Array von Zeichenfolgen, wenn selects="multiple". Wenn selects="multiple", aktualisieren Sie die JavaScript-Eigenschaft, um diesen Wert zu ändern.
undefined defaultValue false string | string[] ''

Der standardmäßig ausgewählte Wert. Die Gruppe setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
### Methoden
Name Beschreibung
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 Beschreibung
change

Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
invalid

Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
### Slots
Name Beschreibung
Standard

<mdui-segmented-button>-Elemente.
### CSS Custom Property
Name Beschreibung
--shape-corner

Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
## mdui-segmented-button API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
icon icon true string

Gibt den Namen des Material Icons für das linke Icon an. Alternativ können Sie slot="icon" verwenden.
end-icon endIcon true string

Gibt den Namen des Material Icons für das rechte Icon an. Alternativ können Sie slot="end-icon" verwenden.
selected-icon selectedIcon true string

Gibt den Namen des Material Icons für den ausgewählten Zustand an. Alternativ können Sie slot="selected-icon" verwenden.
href href true string

Die URL für den Link. Wenn gesetzt, wird die Komponente als <a>-Element gerendert und unterstützt Link-bezogene Attribute.
download download true string

Lädt die verlinkte URL herunter.

Hinweis: Nur verfügbar, wenn href angegeben ist.
target target true '_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 true '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 true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
disabled disabled true boolean false

Deaktiviert das Element.
loading loading true boolean false

Gibt an, dass sich das Element in einem Ladezustand befindet.
name name true string ''

Der Button-Name, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
value value true string ''

Der Button-Wert, der mit Formulardaten übermittelt wird.

Hinweis: Nur verfügbar, wenn href nicht angegeben ist.
type type true '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 true 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 true 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 true '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 true '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 true 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 true '_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".
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Die Validierungsnachricht. Gibt eine leere Zeichenfolge zurück, wenn das Element gültig ist.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
focus

Wird ausgelöst, wenn der Segmented Button den Fokus erhält.
blur

Wird ausgelöst, wenn der Segmented 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 Beschreibung
Standard

Textinhalt.
icon

Linkes Icon.
selected-icon

Icon für den ausgewählten Zustand.
end-icon

Rechtes Icon.
### CSS Parts
Name Beschreibung
button

Internes <button>- oder <a>-Element.
icon

Linkes Icon.
selected-icon

Icon für den ausgewählten Zustand.
end-icon

Rechtes Icon.
label

Textinhalt.
loading

Das <mdui-circular-progress>-Element für den Ladezustand.
# Slider-Komponente Die Slider-Komponente ermöglicht es Benutzern, durch Ziehen einen Wert aus einer Reihe von Werten auszuwählen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/slider.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Slider } from 'mdui/components/slider.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Standardwert {#example-value} Über das Attribut `value` können Sie den aktuellen Wert des Sliders lesen oder setzen. ```html ``` ### Deaktivierter Zustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um den Slider zu deaktivieren. ```html ``` ### Bereich {#example-min-max} Mit den Attributen `min` und `max` legen Sie die Minimal- und Maximalwerte des Sliders fest. ```html ``` ### Schrittweite {#example-step} Über das Attribut `step` können Sie die Schrittweite des Sliders festlegen. ```html ``` ### Skalenstriche {#example-tickmarks} Fügen Sie das Attribut `tickmarks` hinzu, um Skalenstriche auf dem Slider anzuzeigen. ```html ``` ### Textbeschriftung ausblenden {#example-nolabel} Wenn Sie die Textbeschriftung auf dem Slider ausblenden möchten, fügen Sie das Attribut `nolabel` hinzu. ```html ``` ### Textbeschriftung anpassen {#example-labelFormatter} Sie können das Anzeigeformat der Textbeschriftung über die JavaScript-Property `labelFormatter` anpassen. Der Wert dieser Property ist eine Funktion, die den aktuellen Wert des Sliders als Parameter erhält und den anzuzeigenden Text zurückgibt. ```html ``` ## mdui-slider API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value false number 0

Der Wert des Schiebereglers, der mit Formulardaten übermittelt wird.
undefined defaultValue false number 0

Der Standardwert. Der Schieberegler setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
min min true number 0

Gibt den Mindestwert an. Standard ist 0.
max max true number 100

Gibt den Höchstwert an. Standard ist 100.
step step true number 1

Gibt das Schrittintervall an. Standard ist 1.
tickmarks tickmarks true boolean false

Fügt dem Schieberegler Skalenstriche hinzu.
nolabel nolabel true boolean false

Blendet die Wertbeschriftung aus.
disabled disabled true boolean false

Deaktiviert den Schieberegler.
form form true string

Verknüpft den Schieberegler mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Schieberegler sein übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es dem Schieberegler, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem er verschachtelt ist.
name name true string ''

Gibt den Namen des Schiebereglers an, der mit Formulardaten übermittelt wird.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
undefined labelFormatter false (value: number) => string

Gibt eine Funktion an, die den Wert des Tooltips formatiert. Die Funktion erhält den Wert des Schiebereglers als Argument und sollte eine Zeichenfolge zurückgeben, die im Tooltip angezeigt wird.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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 Beschreibung
focus

Wird ausgelöst, wenn der Schieberegler den Fokus erhält.
blur

Wird ausgelöst, wenn der Schieberegler den Fokus verliert.
change

Wird ausgelöst, wenn sich der Wert ändert und der Schieberegler den Fokus verliert.
input

Wird ausgelöst, wenn sich der Wert ändert.
invalid

Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
### CSS Parts
Name Beschreibung
track-inactive

Inaktive Spur.
track-active

Aktive Spur.
handle

Schieberegler-Griff.
label

Wertbeschriftung.
tickmark

Skalenstrich.
# Snackbar-Komponente Die Snackbar-Komponente zeigt kurze Status- und Fortschrittsmeldungen auf der Seite an. Zusätzlich zur direkten Verwendung dieser Komponente bietet mdui eine Funktion [`mdui.snackbar`](/de/docs/2/functions/snackbar) an, um die Verwendung der Snackbar-Komponente zu vereinfachen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/snackbar.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` Beispiel: ```html Foto archiviert Snackbar öffnen ``` ## Beispiele {#examples} ### Position {#example-placement} Über das Attribut `placement` können Sie die Anzeigeposition der Snackbar festlegen. ```html
Foto archiviert top-start Foto archiviert top Foto archiviert top-end
Foto archiviert bottom-start Foto archiviert bottom Foto archiviert bottom-end
``` ### Aktionsbutton {#example-action} Mit dem Attribut `action` fügen Sie rechts in der Snackbar einen Aktionsbutton hinzu. Den Text des Buttons geben Sie über dieses Attribut an. Ein Klick auf den Aktionsbutton löst das Ereignis `action-click` aus. Wenn der Aktionsbutton einen Ladezustand anzeigen soll, fügen Sie das Attribut `action-loading` hinzu. ```html Foto archiviert Snackbar öffnen ``` Sie können auch über den Slot `action` ein benutzerdefiniertes Element rechts in der Snackbar hinzufügen. ```html Foto archiviert Rückgängig Snackbar öffnen ``` ### Schließbar {#example-closeable} Nach dem Hinzufügen des Attributs `closeable` erscheint rechts in der Snackbar eine Schaltfläche zum Schließen. Ein Klick auf diese Schaltfläche schließt die Snackbar und löst das Ereignis `close` aus. ```html Foto archiviert Snackbar öffnen ``` Sie können das Element der Schaltfläche zum Schließen über den Slot `close-button` anpassen. ```html Foto archiviert Snackbar öffnen ``` Über das Attribut `close-icon` können Sie das Material Icons-Symbol in der standardmäßigen Schaltfläche zum Schließen ändern. Sie können das Symbolelement auch über den Slot `close-icon` anpassen. ```html Foto archiviert Snackbar öffnen ``` ### Textzeilen {#example-message-line} Standardmäßig gibt es keine Beschränkung der Textzeilen für die Nachricht. Sie können die maximale Anzahl der Textzeilen mit dem Attribut `message-line` auf maximal 2 Zeilen begrenzen. ```html Der Artikel hat bereits das Label "Reisen". Sie können ein neues Label hinzufügen. Sie können ein neues Label hinzufügen. Snackbar öffnen ``` ### Automatische Schließverzögerung {#example-auto-close-delay} Sie können die Verzögerung für das automatische Schließen mit dem Attribut `auto-close-delay` in Millisekunden festlegen. Der Standardwert ist 5000 Millisekunden. ```html Foto archiviert Snackbar öffnen ``` ### Schließen durch Klick auf externen Bereich {#example-close-on-outside-click} Fügen Sie das Attribut `close-on-outside-click` hinzu, um die Snackbar zu schließen, wenn Sie auf einen Bereich außerhalb der Snackbar klicken. ```html Foto archiviert Snackbar öffnen ``` ## mdui-snackbar API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
open open true boolean false

Öffnet die Snackbar.
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

Position der Snackbar. Standard ist bottom. Mögliche Werte:

  • top: Oben zentriert.
  • top-start: Oben links.
  • top-end: Oben rechts.
  • bottom: Unten zentriert.
  • bottom-start: Unten links.
  • bottom-end: Unten rechts.
action action true string

Text für die Aktionsschaltfläche. Alternativ können Sie slot="action" verwenden.
action-loading actionLoading true boolean false

Gibt an, ob sich die Aktionsschaltfläche in einem Ladezustand befindet.
closeable closeable true boolean false

Zeigt rechts einen Schließen-Button an.
close-icon closeIcon true string

Name des Material Icons für den Schließen-Button. Alternativ können Sie slot="close-icon" verwenden.
message-line messageLine true 1 | 2

Maximale Zeilen für den Nachrichtentext. Standard ist unbegrenzt. Mögliche Werte:

  • 1: Einzeilig.
  • 2: Zweizeilig.
auto-close-delay autoCloseDelay true number 5000

Schließt die Snackbar automatisch nach der angegebenen Verzögerung (in Millisekunden). Setzen Sie 0, um das automatische Schließen zu deaktivieren. Standard ist 5000.
close-on-outside-click closeOnOutsideClick true boolean false

Schließt die Snackbar, wenn der Benutzer außerhalb klickt oder tippt.
### Ereignisse
Name Beschreibung
open

Wird ausgelöst, wenn die Snackbar beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
opened

Wird ausgelöst, nachdem die Snackbar geöffnet wurde und die Animationen abgeschlossen sind.
close

Wird ausgelöst, wenn die Snackbar beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
closed

Wird ausgelöst, nachdem die Snackbar geschlossen wurde und die Animationen abgeschlossen sind.
action-click

Wird ausgelöst, wenn die Aktionsschaltfläche angeklickt wird.
### Slots
Name Beschreibung
Standard

Snackbar-Nachricht.
action

Rechte Aktionsschaltfläche.
close-button

Rechter Schließen-Button. Wird angezeigt, wenn closeable gesetzt ist.
close-icon

Icon im rechten Schließen-Button.
### CSS Parts
Name Beschreibung
message

Nachrichtentext.
action

Aktionsschaltfläche.
close-button

Schließen-Button.
close-icon

Icon im Schließen-Button.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# Switch-Komponente Die Switch-Komponente schaltet den Ein-/Aus-Zustand einer einzelnen Option um. Durch die intuitive Interaktion lassen sich Einstellungen einfach anpassen. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/switch.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Switch } from 'mdui/components/switch.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Ausgewählter Zustand {#example-checked} Wenn der Switch ausgewählt ist, hat das Attribut `checked` den Wert `true`. Sie können das Attribut `checked` auch hinzufügen, um den Switch standardmäßig ausgewählt zu haben. ```html ``` ### Deaktivierter Zustand {#example-disabled} Mit dem Attribut `disabled` wird die Switch-Komponente deaktiviert. ```html ``` ### Symbol {#example-icon} Sie können über das Attribut `unchecked-icon` das Material Icons-Symbol für den nicht ausgewählten Zustand und über `checked-icon` das Symbol für den ausgewählten Zustand festlegen. Sie können dies auch über die Slots `unchecked-icon` und `checked-icon` tun. ```html ``` ## mdui-switch API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
disabled disabled true boolean false

Deaktiviert den Switch.
checked checked true boolean false

Setzt den Switch in den aktivierten Zustand.
undefined defaultChecked false boolean false

Der standardmäßig aktivierte Zustand. Der Switch setzt beim Zurücksetzen des Formulars auf diesen Zustand zurück. Nur JavaScript.
unchecked-icon uncheckedIcon true string

Der Name des Material Icons für den nicht aktivierten Zustand. Alternativ können Sie slot="unchecked-icon" verwenden.
checked-icon checkedIcon true string

Der Name des Material Icons für den aktivierten Zustand. Alternativ können Sie slot="checked-icon" verwenden. Standardmäßig wird das check-Icon verwendet; das Setzen einer leeren Zeichenfolge entfernt das Standard-Icon.
required required true boolean false

Der Switch muss aktiviert sein, bevor das Formular gesendet wird.
form form true string

Verknüpft den Switch mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet der Switch sein übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es dem Switch, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem er verschachtelt ist.
name name true string ''

Der Name des Switches, der mit Formulardaten übermittelt wird.
value value true string 'on'

Der Wert des Switches, der mit Formulardaten übermittelt wird.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
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.
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn der Switch den Fokus erhält.
blur

Wird ausgelöst, wenn der Switch den Fokus verliert.
change

Wird ausgelöst, wenn sich der aktivierte Zustand ändert.
input

Wird ausgelöst, wenn sich der aktivierte 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 Beschreibung
unchecked-icon

Element für den nicht aktivierten Zustand.
checked-icon

Element für den aktivierten Zustand.
### CSS Parts
Name Beschreibung
track

Spur.
thumb

Daumen.
unchecked-icon

Icon für den nicht aktivierten Zustand.
checked-icon

Icon für den aktivierten Zustand.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der Eckradius des Icon-Containers. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
# Tabs-Komponente Die Tabs-Komponente gruppiert und zeigt Inhalte oder Datensätze an, damit Benutzer einfach zwischen Kategorien wechseln können. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` Beispiel: ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## Beispiele {#examples} ### Tab-Stil {#example-variant} Verwenden Sie das Attribut `variant` auf der ``-Komponente, um den Stil der Tabs festzulegen. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Tab-Position {#example-placement} Mit dem Attribut `placement` auf der ``-Komponente legen Sie die Position der Tabs fest. ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Volle Breite {#example-full-width} Fügen Sie das Attribut `full-width` zur ``-Komponente hinzu, damit die Tabs die volle Breite einnehmen. Die einzelnen Tabs verteilen sich dann gleichmäßig auf die Breite. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Symbol {#example-icon} Setzen Sie das Attribut `icon` auf der ``-Komponente, um ein Material Icons-Symbol auf dem Tab hinzuzufügen. Sie können das Symbolelement auch über den Slot `icon` hinzufügen. Fügen Sie das Attribut `inline` hinzu, um Symbol und Text horizontal anzuordnen. ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Badge {#example-badge} In der ``-Komponente können Sie über den Slot `badge` ein Badge hinzufügen. ```html Tab 1 99+ Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### Benutzerdefinierter Inhalt {#example-custom} Verwenden Sie den Slot `custom` in der ``-Komponente, um den Inhalt des Tabs vollständig anzupassen. ```html Tab 1 Icon Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value true string

Gibt den Wert des Tab Panels an.
### Slots
Name Beschreibung
Standard

Der Inhalt des Tab Panels.
## mdui-tab API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
value value true string

Gibt den Tab-Wert an.
icon icon true string

Gibt den Namen des Material Icons an. Alternativ können Sie slot="icon" verwenden.
inline inline true boolean false

Ordnet Icon und Text horizontal an.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn der Tab den Fokus erhält.
blur

Wird ausgelöst, wenn der Tab den Fokus verliert.
### Slots
Name Beschreibung
Standard

Tab-Text.
icon

Tab-Icon.
badge

Badge.
custom

Benutzerdefinierter Tab-Inhalt.
### CSS Parts
Name Beschreibung
container

Tab-Container.
icon

Tab-Icon.
label

Tab-Text.
## mdui-tabs API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'primary' | 'secondary' 'primary'

Definiert die Tab-Variante. Mögliche Werte:

  • primary: Befindet sich unterhalb von <mdui-top-app-bar> und wird verwendet, um zwischen Anwendungsseiten zu wechseln.
  • secondary: Befindet sich innerhalb der Seite und wird verwendet, um zwischen verwandten Inhaltsgruppen zu wechseln.
value value true string

Gibt den Wert des aktiven <mdui-tab> an.
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

Definiert die Tab-Position. Standard ist top-start. Mögliche Werte:

  • top-start: Oben links.
  • top: Oben zentriert.
  • top-end: Oben rechts.
  • bottom-start: Unten links.
  • bottom: Unten, zentriert.
  • bottom-end: Unten rechts.
  • left-start: Links oben.
  • left: Links, zentriert.
  • left-end: Links unten.
  • right-start: Rechts oben.
  • right: Rechts, zentriert.
  • right-end: Rechts unten.
full-width fullWidth true boolean false

Wenn gesetzt, füllen die Tabs die Breite ihres übergeordneten Elements aus.
### Ereignisse
Name Beschreibung
change

Wird ausgelöst, wenn sich der ausgewählte Wert ändert.
### Slots
Name Beschreibung
Standard

<mdui-tab>-Elemente.
panel

<mdui-tab-panel>-Elemente.
### CSS Parts
Name Beschreibung
container

Container für <mdui-tab>-Elemente.
indicator

Indikator für den aktiven Zustand.
# Text Field-Komponente Die Text Field-Komponente ermöglicht es Benutzern, Text auf einer Seite einzugeben. Sie wird häufig in Formularen und Dialogen verwendet. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/text-field.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` Beispiel: ```html ``` ## Beispiele {#examples} ### Form {#example-variant} Mit dem Attribut `variant` bestimmen Sie die Form des Textfelds. ```html

``` ### Hilfstext {#example-helper-text} Mit dem Attribut `label` legen Sie den Label-Text über dem Textfeld fest. ```html ``` Mit dem Attribut `placeholder` legen Sie den Platzhaltertext für nicht ausgefüllte Werte fest. ```html ``` Mit dem Attribut `helper` legen Sie den Hilfetext unter dem Textfeld fest. Sie können den Hilfetext auch über den Slot `helper` festlegen. Fügen Sie `helper-on-focus` hinzu, um den Hilfetext nur anzuzeigen, wenn das Textfeld fokussiert ist. ```html Unterstützender Text ``` ### Löschbar {#example-clearable} Wenn Sie das Attribut `clearable` hinzufügen, erscheint rechts neben dem Textfeld eine Schaltfläche zum Löschen, wenn das Textfeld einen Wert hat. ```html ``` ### Text rechtsbündig ausrichten {#example-end-aligned} Fügen Sie das Attribut `end-aligned` hinzu, um den Text rechtsbündig auszurichten. ```html ``` ### Text und Symbole links/rechts {#example-prefix-suffix} Über die Attribute `icon` und `end-icon` können Sie links bzw. rechts vom Textfeld ein Material Icons-Symbol hinzufügen. Sie können auch über die Slots `icon` und `end-icon` Elemente hinzufügen. ```html

``` Über die Attribute `prefix` und `suffix` können Sie links bzw. rechts vom Textfeld Text hinzufügen. Sie können auch über die Slots `prefix` und `suffix` Textelemente hinzufügen. Diese Texte werden nur angezeigt, wenn das Textfeld fokussiert ist oder einen Wert hat. ```html

$ /100 ``` ### Nur-Lese-Modus {#example-readonly} Fügen Sie das Attribut `readonly` hinzu, um das Textfeld in den Nur-Lese-Modus zu versetzen. ```html ``` ### Deaktivierter Zustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um das Textfeld zu deaktivieren. ```html ``` ### Mehrzeiliges Textfeld {#example-rows} Verwenden Sie das Attribut `rows`, um die Anzahl der Zeilen eines mehrzeiligen Textfelds festzulegen. ```html ``` Sie können auch das Attribut `autosize` hinzufügen, damit sich die Höhe des Textfelds automatisch an die Länge des eingegebenen Texts anpasst. Mit den Attributen `min-rows` und `max-rows` können Sie die minimale und maximale Zeilenanzahl für die automatische Anpassung festlegen. ```html

``` ### Zeichenzähler {#example-counter} Wenn Sie die maximale Zeichenanzahl über das Attribut `maxlength` festgelegt haben, können Sie das Attribut `counter` hinzufügen, um einen Zeichenzähler unter dem Textfeld anzuzeigen. ```html ``` ### Passwortfeld {#example-password} Wenn `type="password"` gesetzt ist, fügen Sie das Attribut `toggle-password` hinzu, um rechts neben dem Textfeld eine Schaltfläche zum Umschalten der Passwortsichtbarkeit anzuzeigen. ```html ``` ## mdui-text-field API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'filled' | 'outlined' 'filled'

Definiert die Textfeld-Variante. Standard ist filled. Mögliche Werte:

  • filled: Textfeld mit einer Hintergrundfarbe für stärkere visuelle Betonung.
  • outlined: Textfeld mit einem Rahmen für dezentere visuelle Betonung.
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

Gibt den Textfeld-Typ an. Standard ist text. Mögliche Werte:

  • text: Standard-Textfeld.
  • number: Ermöglicht nur numerische Eingabe. Virtuelle Tastaturen auf mobilen Geräten zeigen ein numerisches Layout an.
  • password: Blendet das Passwort während der Eingabe aus.
  • url: Validiert das URL-Format. Virtuelle Tastaturen auf mobilen Geräten zeigen ein URL-spezifisches Layout an.
  • email: Validiert das E-Mail-Format. Virtuelle Tastaturen auf mobilen Geräten zeigen ein E-Mail-spezifisches Layout an.
  • search: Zeigt ein Suchsymbol auf der Eingabetaste in virtuellen Tastaturen an.
  • tel: Zeigt eine Telefontastatur auf virtuellen Tastaturen an.
  • hidden: Blendet das Steuerelement aus, aber sein Wert wird dennoch an den Server gesendet.
  • date: Öffnet einen Datumsauswähler oder ein numerisches Scrollrad für Jahr, Monat und Tag in unterstützten Browsern.
  • datetime-local: Aktiviert einen Datums- und Uhrzeitauswähler in unterstützten Browsern, ohne Zeitzone.
  • month: Ermöglicht die Eingabe eines Jahres und Monats ohne Zeitzone.
  • time: Ermöglicht die Zeit Eingabe ohne Zeitzone.
  • week: Ermöglicht die Eingabe eines Jahres und einer Kalenderwoche ohne Zeitzone.
name name true string ''

Der Name des Textfelds, der mit Formulardaten übermittelt wird.
value value false string ''

Der Wert des Textfelds, der mit Formulardaten übermittelt wird.
undefined defaultValue false string ''

Der Standardwert. Das Textfeld setzt beim Zurücksetzen des Formulars auf diesen Wert zurück. Nur JavaScript.
label label true string

Beschriftungstext.
placeholder placeholder true string

Platzhaltertext.
helper helper true string

Hilfetext am unteren Rand des Textfelds. Alternativ können Sie slot="helper" verwenden.
helper-on-focus helperOnFocus true boolean false

Blendet den Hilfetext nur ein, wenn das Textfeld fokussiert ist.
clearable clearable true boolean false

Macht das Textfeld löschbar.
clear-icon clearIcon true string

Name des Material Icons rechts, wenn das Textfeld löschbar ist. Alternativ können Sie slot="clear-icon" verwenden.
end-aligned endAligned true boolean false

Richtet den Text rechtsbündig aus.
prefix prefix true string

Präfix-Text des Textfelds. Er wird nur angezeigt, wenn das Textfeld fokussiert ist oder einen Wert hat. Alternativ können Sie slot="prefix" verwenden.
suffix suffix true string

Suffix-Text des Textfelds. Er wird nur angezeigt, wenn das Textfeld fokussiert ist oder einen Wert hat. Alternativ können Sie slot="suffix" verwenden.
icon icon true string

Name des Material Icons für das Präfix-Icon des Textfelds. Alternativ können Sie slot="icon" verwenden.
end-icon endIcon true string

Name des Material Icons für das Suffix-Icon des Textfelds. Alternativ können Sie slot="end-icon" verwenden.
error-icon errorIcon true string

Name des Material Icons, das bei fehlgeschlagener Formularfeldvalidierung rechts im Textfeld angezeigt wird. Alternativ können Sie slot="error-icon" verwenden.
form form true string

Verknüpft das Textfeld mit einem <form>-Element. Setzen Sie dies auf die id eines <form>-Elements im selben Dokument. Wenn nicht angegeben, verwendet das Textfeld sein übergeordnetes <form>-Element, falls vorhanden.

Dies ermöglicht es dem Textfeld, mit jedem Formular im Dokument zu arbeiten, nicht nur mit dem, in dem es verschachtelt ist.
readonly readonly true boolean false

Macht das Textfeld schreibgeschützt.
disabled disabled true boolean false

Deaktiviert das Textfeld.
required required true boolean false

Das Feld muss ausgefüllt werden, bevor das Formular gesendet wird.
rows rows true number

Die Anzahl der Zeilen im Textfeld.
autosize autosize true boolean false

Passt die Höhe des Textfelds automatisch an seinen Inhalt an.
min-rows minRows true number

Die minimale Anzahl von Zeilen, wenn autosize aktiviert ist.
max-rows maxRows true number

Die maximale Anzahl von Zeilen, wenn autosize aktiviert ist.
minlength minlength true number

Die minimale Anzahl von Zeichen für die Eingabe.
maxlength maxlength true number

Die maximale Anzahl von Zeichen für die Eingabe.
counter counter true boolean false

Zeigt die Zeichenanzahl an, wenn maxlength angegeben ist.
min min true number

Der Mindestwert, wenn type number ist.
max max true number

Der Höchstwert, wenn type number ist.
step step true number

Das Schrittintervall für Erhöhen/Verringern, wenn type number ist.
pattern pattern true string

Der reguläre Ausdruck für die Formularvalidierung.
toggle-password togglePassword true boolean false

Fügt eine Umschaltfläche hinzu, um das Passwort anzuzeigen oder zu verbergen, wenn type password ist.
show-password-icon showPasswordIcon true string

Name des Material Icons für die Umschaltfläche zum Anzeigen des Passworts. Alternativ können Sie slot="show-password-icon" verwenden.
hide-password-icon hidePasswordIcon true string

Name des Material Icons für die Umschaltfläche zum Verbergen des Passworts. Alternativ können Sie slot="hide-password-icon" verwenden.
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

Ein nicht standardmäßiges iOS-Attribut für die automatische Großschreibung. Mögliche Werte:

  • none: Deaktiviert die automatische Großschreibung.
  • sentences: Schreibt den ersten Buchstaben jedes Satzes groß.
  • words: Schreibt den ersten Buchstaben jedes Wortes groß.
  • characters: Schreibt alle Buchstaben groß.
autocorrect autocorrect true string

Das autocorrect-Attribut des input-Elements.
autocomplete autocomplete true string

Das autocomplete-Attribut des input-Elements.
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

Passt den Text oder das Symbol der Eingabetaste auf der virtuellen Tastatur an. Die Wirkung variiert je nach Gerät und Sprache. Mögliche Werte:

  • enter: Fügt eine neue Zeile ein, typischerweise in einem mehrzeiligen Textfeld verwendet.
  • done: Zeigt Fertigstellung an und schließt die virtuelle Tastatur.
  • go: Navigiert zum Ziel des eingegebenen Textes.
  • next: Bewegt sich zum nächsten Textfeld.
  • previous: Bewegt sich zum vorherigen Textfeld.
  • search: Navigiert zu Suchergebnissen.
  • send: Sendet eine Textnachricht.
spellcheck spellcheck true boolean false

Aktiviert die Rechtschreibprüfung.
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

Passt die virtuelle Tastatur an. Mögliche Werte:

  • none: Keine virtuelle Tastatur. Ideal für benutzerdefinierte Eingabesteuerelemente.
  • text: Standard-Tastatur für Texteingabe.
  • decimal: Dezimal-Eingabetastatur. Diese enthält einen Punkt . oder Komma , und Zahlen.
  • numeric: Numerische Tastatur. Diese zeigt die Zahlen 0–9 an.
  • tel: Telefonnummern-Tastatur. Diese enthält die Zahlen 0–9, Stern * und Rautetaste #.
  • search: Für die Suche optimierte virtuelle Tastatur. 'Suchen' erscheint auf der Schaltfläche 'Senden'.
  • email: Für E-Mail optimierte virtuelle Tastatur. Diese enthält typischerweise @ und ..
  • url: Für URL optimierte virtuelle Tastatur. Diese enthält typischerweise ., / und #.
undefined validity false ValidityState

Ein ValidityState-Objekt, das die Gültigkeitszustände des Elements darstellt.
undefined validationMessage false string

Validierungsnachricht. Leere Zeichenfolge, wenn gültig.
undefined valueAsNumber false number

Ruft den Wert als number ab oder legt ihn fest. Gibt NaN zurück, wenn der Wert nicht konvertiert werden kann.
autofocus autofocus true boolean false

Gibt an, ob das Element beim Laden der Seite den Fokus erhält.
tabindex tabIndex false number

Die Tab-Reihenfolge des Elements beim Navigieren mit der Tabulatortaste.
### Methoden
Name Beschreibung
select(): void

Wählt den Inhalt des Textfelds aus.
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

Wählt einen bestimmten Bereich im Textfeld aus.
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

Ersetzt einen bestimmten Bereich im Textfeld durch neuen Text.
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.
click(): void

Simuliert einen Mausklick auf das Element.
focus(options?: FocusOptions): 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.
### Ereignisse
Name Beschreibung
focus

Wird ausgelöst, wenn das Textfeld den Fokus erhält.
blur

Wird ausgelöst, wenn das Textfeld den Fokus verliert.
change

Wird ausgelöst, wenn sich der Wert ändert und das Textfeld den Fokus verliert.
input

Wird ausgelöst, wenn sich der Wert ändert.
invalid

Wird ausgelöst, wenn die Gültigkeit des Formularsteuerelements überprüft wird und es die Einschränkungen nicht erfüllt.
clear

Wird ausgelöst, wenn der Löschen-Button angeklickt wird. Kann mit event.preventDefault() verhindert werden.
### Slots
Name Beschreibung
icon

Icon auf der linken Seite.
end-icon

Icon auf der rechten Seite.
error-icon

Icon auf der rechten Seite bei Validierungsfehler.
prefix

Text auf der linken Seite.
suffix

Text auf der rechten Seite.
clear-button

Löschen-Button.
clear-icon

Icon im Löschen-Button.
toggle-password-button

Schaltfläche zum Umschalten der Passwortsichtbarkeit.
show-password-icon

Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort anzeigen').
hide-password-icon

Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort verbergen').
helper

Hilfetext, der unter dem Feld angezeigt wird.
### CSS Parts
Name Beschreibung
container

Container für das Textfeld.
icon

Icon auf der linken Seite.
end-icon

Icon auf der rechten Seite.
error-icon

Icon auf der rechten Seite bei Validierungsfehler.
prefix

Text auf der linken Seite.
suffix

Text auf der rechten Seite.
label

Beschriftungstext über dem Feld.
input

Internes <input>- oder <textarea>-Element.
clear-button

Löschen-Button.
clear-icon

Icon im Löschen-Button.
toggle-password-button

Schaltfläche zum Umschalten der Passwortsichtbarkeit.
show-password-icon

Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort anzeigen').
hide-password-icon

Icon in der Schaltfläche zum Umschalten der Passwortsichtbarkeit (Zustand 'Passwort verbergen').
supporting

Container für unterstützenden Text am unteren Rand des Feldes, einschließlich Hilfetext, Fehlertext und Zähler.
helper

Hilfetext, der unter dem Feld angezeigt wird.
error

Text unten für Fehler.
counter

Zeichenanzahl in der unteren rechten Ecke.
# Tooltip-Komponente Tooltips dienen dazu, ergänzenden Text oder Kontextinformationen zu einem bestimmten Element bereitzustellen, damit Benutzer die Funktion oder den Zweck des Elements besser verstehen können. ## Verwendung {#usage} Importieren Sie die Komponente nach Bedarf: ```js import 'mdui/components/tooltip.js'; ``` Importieren Sie den TypeScript-Typ der Komponente nach Bedarf: ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` Beispiel: ```html Button ``` ## Beispiele {#examples} ### Einfacher Text-Tooltip {#example-plain} Standardmäßig wird ein einfacher Text-Tooltip verwendet. Sie können den Inhalt des Tooltips mit dem Attribut `content` festlegen. ```html Button ``` Sie können den Inhalt des Tooltips auch über den Slot `content` festlegen. ```html Button
Titel
Inhalt
 ``` ### Rich-Tooltip {#example-rich} Setzen Sie das Attribut `variant` auf `rich`, um einen Rich-Tooltip zu erstellen. Titel und Inhalt des Tooltips legen Sie mit den Attributen `headline` und `content` fest. ```html Button ``` Sie können den Titel und den Inhalt auch über die Slots `headline` und `content` festlegen. Verwenden Sie den Slot `action`, um einen Aktionsbutton im Tooltip hinzuzufügen. ```html Button
Rich-Tooltip
Rich-Tooltips heben ein bestimmtes Element oder eine Funktion hervor, die besondere Aufmerksamkeit verdient. Sie unterstützen mehrere Textzeilen.
Aktion ``` ### Position {#example-placement} Über das Attribut `placement` können Sie die Position des Tooltips festlegen. ```html
``` ### Auslösemechanismus {#example-trigger} Über das Attribut `trigger` können Sie den Auslösemechanismus des Tooltips festlegen. ```html Button ``` ### Verzögerung beim Öffnen/Schließen {#example-delay} Wenn der Auslösemechanismus `hover` ist, können Sie mit den Attributen `open-delay` und `close-delay` die Verzögerung beim Öffnen und Schließen des Tooltips in Millisekunden festlegen. ```html Button ``` ### Deaktivierter Zustand {#example-disabled} Fügen Sie das Attribut `disabled` hinzu, um den Tooltip zu deaktivieren. ```html Button ``` ## mdui-tooltip API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'plain' | 'rich' 'plain'

Definiert die Tooltip-Variante. Standard ist plain. Mögliche Werte:

  • plain: Für einfachen, einzeiligen Text.
  • rich: Für Tooltips mit einem Titel, Textkörper und Aktionsschaltflächen.
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

Die Position des Tooltips. Standard ist auto. Mögliche Werte:

  • auto: Position wird automatisch bestimmt. Bei variant="plain" wird top bevorzugt; bei variant="rich" wird bottom-right bevorzugt.
  • top-left: Oben links.
  • top-start: Oben, linksbündig.
  • top: Oben, zentriert.
  • top-end: Oben, rechtsbündig.
  • top-right: Oben rechts.
  • bottom-left: Unten links.
  • bottom-start: Unten, linksbündig.
  • bottom: Unten, zentriert.
  • bottom-end: Unten, rechtsbündig.
  • bottom-right: Unten rechts.
  • left-start: Links, oben ausgerichtet.
  • left: Links, zentriert.
  • left-end: Links, unten ausgerichtet.
  • right-start: Rechts, oben ausgerichtet.
  • right: Rechts, zentriert.
  • right-end: Rechts, unten ausgerichtet.
open-delay openDelay true number 150

Die Verzögerung (in Millisekunden), bevor der Tooltip bei Mouseover erscheint.
close-delay closeDelay true number 150

Die Verzögerung (in Millisekunden), bevor der Tooltip bei Mouseover verschwindet.
headline headline true string

Legt den Tooltip-Titel fest. Gilt nur, wenn variant="rich". Alternativ können Sie slot="headline" verwenden.
content content true string

Legt den Tooltip-Inhalt fest. Alternativ können Sie slot="content" verwenden.
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

Definiert, wie der Tooltip geöffnet wird. Mehrere durch Leerzeichen getrennte Werte werden unterstützt. Mögliche Werte:

  • click: Wird bei Klick ausgelöst.
  • hover: Wird bei Mouseover ausgelöst.
  • focus: Wird beim Fokussieren ausgelöst.
  • manual: Kann nur programmgesteuert geöffnet und geschlossen werden; es können keine anderen Auslösemethoden angegeben werden.
disabled disabled true boolean false

Deaktiviert den Tooltip.
open open true boolean false

Öffnet den Tooltip.
### Ereignisse
Name Beschreibung
open

Wird ausgelöst, wenn der Tooltip beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
opened

Wird ausgelöst, nachdem der Tooltip geöffnet wurde und die Animationen abgeschlossen sind.
close

Wird ausgelöst, wenn der Tooltip beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
closed

Wird ausgelöst, nachdem der Tooltip geschlossen wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Zielelement, das den Tooltip auslöst. Nur das erste Element im default-Slot wird als Ziel verwendet.
headline

Tooltip-Titel. Gilt nur, wenn variant="rich".
content

Tooltip-Inhalt, der HTML enthalten kann. Wenn Sie nur Text benötigen, können Sie auch das content-Attribut verwenden.
action

Aktionsschaltfläche am unteren Rand des Tooltips. Nur verfügbar, wenn variant="rich".
### CSS Parts
Name Beschreibung
popup

Container für den Tooltip.
headline

Titel des Tooltips.
content

Textkörper des Tooltips.
action

Aktionsschaltfläche des Tooltips.
### CSS Custom Property
Name Beschreibung
--shape-corner-plain

Eckradius der Komponente bei variant="plain". Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
--shape-corner-rich

Eckradius der Komponente bei variant="rich". Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
--z-index

Der CSS z-index-Wert der Komponente.
# Top App Bar-Komponente Die Top App Bar zeigt oben auf der Seite wichtige Informationen und zugehörige Aktionen an und bietet eine klare Navigation sowie schnellen Zugriff auf Funktionen. ## Verwendung {#usage} Importieren Sie die Komponenten nach Bedarf: ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` Importieren Sie die TypeScript-Typen der Komponenten nach Bedarf: ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` Beispiel: (Das `style="position: relative"` im Beispiel dient nur zur Veranschaulichung; entfernen Sie dieses Stilattribut in echten Projekten.) ```html Titel
``` **Wichtige Hinweise:** Diese Komponente verwendet standardmäßig die Positionierung `position: fixed` und fügt automatisch `padding-top` zum `body` hinzu, um zu verhindern, dass Seiteninhalte von dieser Komponente verdeckt werden. In den folgenden zwei Fällen wird jedoch standardmäßig die Positionierung `position: absolute` verwendet: 1. Wenn das Attribut `scroll-target` angegeben ist. In diesem Fall wird `padding-top` zum Element `scroll-target` hinzugefügt. 2. Wenn sie sich innerhalb von [``](/de/docs/2/components/layout) befindet. In diesem Fall wird kein `padding-top` hinzugefügt. ## Beispiele {#examples} ### Innerhalb eines angegebenen Containers {#example-scroll-target} Standardmäßig wird die Top App Bar relativ zum aktuellen Fenster oben auf der Seite angezeigt. Wenn Sie die Top App Bar in einem bestimmten Container platzieren möchten, geben Sie auf der ``-Komponente das Attribut `scroll-target` an. Der Wert kann ein CSS-Selektor oder ein DOM-Element des scrollbaren Inhaltscontainers sein. In diesem Fall wird die Top App Bar relativ zum übergeordneten Element angezeigt (Sie müssen dem übergeordneten Element selbst die Stile `position: relative; overflow: hidden` hinzufügen). ```html
Titel
``` ### Form {#example-variant} Sie können die Form der Top App Bar mit dem Attribut `variant` auf der ``-Komponente festlegen. ```html
Titel
center-aligned small medium large
``` ### Scrollverhalten {#example-scroll-behavior} Setzen Sie das Attribut `scroll-behavior` auf der ``-Komponente, um das Scrollverhalten der Top App Bar zu definieren. Sie können mehrere Verhaltensweisen gleichzeitig mit Leerzeichen getrennt angeben. Das Scrollverhalten umfasst: - `hide`: Die Top App Bar wird beim Scrollen nach unten ausgeblendet und beim Scrollen nach oben wieder eingeblendet. - `shrink`: Nur wirksam, wenn das Attribut `variant` auf `medium` oder `large` gesetzt ist. Die Top App Bar wird beim Scrollen nach unten erweitert und beim Scrollen nach oben eingezogen. - `elevate`: Beim Scrollen nach unten wird ein Schatten auf der Top App Bar hinzugefügt; wenn Sie zum Anfang der Seite zurückrollen, wird der Schatten entfernt. Verwenden Sie das Attribut `scroll-threshold`, um festzulegen, wie viele Pixel gescrollt werden müssen, bevor das Scrollverhalten der Top App Bar ausgelöst wird. (Hinweis: Für eine schnelle Reaktion sollten Sie bei Verwendung des Scrollverhaltens `elevate` das Attribut `scroll-threshold` nicht mehr setzen.) **Beispiel: Beim Scrollen ausblenden** ```html
Titel
``` **Beispiel: Beim Scrollen Schatten hinzufügen** ```html
Titel
``` **Beispiel: Beim Scrollen einziehen** ```html
Titel
``` **Beispiel: Beim Scrollen einziehen und Schatten hinzufügen** ```html
Titel
``` ### Text im erweiterten Zustand {#label-large} Für die Top App Bar mit `variant` `medium` oder `large` und `scroll-behavior` `shrink` können Sie den Slot `label-large` in der ``-Komponente verwenden, um den Text für den erweiterten Zustand festzulegen. ```html
Dies ist der Titel für den eingezogenen Zustand Dies ist der Titel für den erweiterten Zustand
``` ## mdui-top-app-bar-title API ### Slots
Name Beschreibung
Standard

Der Titeltext der Top App Bar.
label-large

Der Titeltext, wenn die Top App Bar im erweiterten Zustand ist.
### CSS Parts
Name Beschreibung
label

Der Titeltext.
label-large

Der Titeltext, wenn die Top App Bar im erweiterten Zustand ist.
## mdui-top-app-bar API ### Eigenschaften
Attribut Property Reflect Typ Standard Beschreibung
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

Definiert die Top App Bar-Variante. Standard ist small. Mögliche Werte:

  • center-aligned: Kleine App-Leiste mit zentriertem Titel.
  • small: Kleine App-Leiste.
  • medium: Mittelgroße App-Leiste.
  • large: Große App-Leiste.
hide hide true boolean false

Gibt an, ob die Top App Bar ausgeblendet ist.
shrink shrink true boolean false

Schrumpft die Top App Bar auf die small-Variante. Gilt nur für medium- oder large-Varianten.
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

Definiert das Scroll-Verhalten. Mehrere durch Leerzeichen getrennte Werte werden akzeptiert. Mögliche Werte:

  • hide: Wird beim Scrollen ausgeblendet.
  • shrink: Schrumpft beim Scrollen (für mittlere bis große App-Leisten).
  • elevate: Erhöht die Höhe beim Scrollen.
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

Das auf Scroll-Ereignisse zu überwachende Element. Akzeptiert einen CSS-Selektor, ein DOM-Element oder ein JQ-Objekt. Standardwert ist window.
scroll-threshold scrollThreshold true number

Die Scroll-Distanz (in Pixeln), die erforderlich ist, um das Scroll-Verhalten auszulösen.
order order true number

Gibt die Layout-Reihenfolge innerhalb der <mdui-layout>-Komponente an. Die Elemente werden in aufsteigender Reihenfolge sortiert. Der Standardwert ist 0.
### Ereignisse
Name Beschreibung
show

Wird ausgelöst, wenn die Top App Bar beginnt, sich anzuzeigen. Kann mit event.preventDefault() verhindert werden.
shown

Wird ausgelöst, nachdem die Top App Bar angezeigt wurde und die Animationen abgeschlossen sind.
hide

Wird ausgelöst, wenn die Top App Bar beginnt, sich auszublenden. Kann mit event.preventDefault() verhindert werden.
hidden

Wird ausgelöst, nachdem die Top App Bar ausgeblendet wurde und die Animationen abgeschlossen sind.
### Slots
Name Beschreibung
Standard

Elemente, die in der Top App Bar enthalten sind.
### CSS Custom Property
Name Beschreibung
--shape-corner

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

Der CSS z-index-Wert der Komponente.
# jq-Toolkit mdui enthält ein leichtgewichtiges JavaScript-Toolkit, das eine jQuery-ähnliche API und Verkettung bietet, aber nur ein Sechstel der Größe von jQuery hat. Sie können diese Hilfsfunktion nach Bedarf importieren: ```js import { $ } from 'mdui/jq.js'; ``` ## Kern {#api-core} ### `$()` {#dollar} Diese Funktion hat mehrere Verwendungsmöglichkeiten: Übergeben Sie einen CSS-Selektor als Argument. Gibt ein JQ-Objekt zurück, das die übereinstimmenden Elemente enthält. ```js $('.box'); ``` Übergeben Sie ein DOM-Element, ein beliebiges Array, eine NodeList oder ein JQ-Objekt. Gibt ein JQ-Objekt zurück, das die angegebenen Elemente enthält. ```js $(document); ``` Übergeben Sie einen HTML-String. Gibt ein JQ-Objekt zurück, das die aus dem HTML erstellten DOM-Elemente enthält. ```js $(`
`); ``` Übergeben Sie eine Funktion. Die Funktion wird aufgerufen, sobald das DOM geladen ist. ```js $(function () { console.log('DOM geladen'); }); ``` ## Erweiterung {#api-extend} ### `$.extend()` {#d-extend} Wenn nur ein Objekt übergeben wird, werden die Eigenschaften dieses Objekts in das `$`-Objekt eingefügt, was dem Hinzufügen neuer Funktionen im `$`-Namensraum entspricht. ```js $.extend({ customFunc: function () {}, }); // Dann kann die benutzerdefinierte Methode so aufgerufen werden $.customFunc(); ``` Wenn zwei oder mehr Objekte übergeben werden, werden die Eigenschaften aller Objekte zum ersten Objekt hinzugefügt und das zusammengeführte Objekt zurückgegeben. Eigenschaften mit dem Wert `undefined` werden jedoch nicht zusammengeführt. ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // Das erste Objekt und der Rückgabewert sind jetzt { key1: val1, key2: val2, key3: val3 } ``` ### `$.fn.extend()` {#fn-extend} Erweitert die Methoden auf der Prototypenkette von `$`. ```js $.fn.extend({ customFunc: function () {}, }); // Die erweiterte Methode kann dann so verwendet werden $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} Serialisiert ein Array oder Objekt in einen URL-Abfragestring. ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` Wenn das übergebene Argument ein Array ist, muss das Format des Arrays dem von [`.serializeArray()`](#serializeArray) zurückgegebenen entsprechen. ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## Array- und Objektoperationen {#api-array} ### `$.each()` {#d-each} Iteriert über ein Array oder Objekt. Es gibt das erste Argument zurück, d. h. das durchlaufene Array oder Objekt. Das erste Argument der Callback-Funktion ist der Index des Arrays oder der Schlüssel des Objekts, das zweite Argument ist der Wert am entsprechenden Index oder Schlüssel. Innerhalb der Callback-Funktion zeigt `this` auf den Wert am entsprechenden Index oder Schlüssel. Wenn die Callback-Funktion `false` zurückgibt, wird die Iteration gestoppt. ```js // Über ein Array iterieren $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // Ausgabe: // 0:a // 1:b // 2:c ``` ```js // Über ein Objekt iterieren $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // Ausgabe // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} Fügt die Elemente des zweiten Arrays an das erste Array an und gibt das zusammengeführte Array zurück. ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} Entfernt doppelte Elemente aus einem Array. ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} Iteriert über ein Array oder Objekt und gibt ein neues Array zurück, das aus den Rückgabewerten der Callback-Funktion besteht. Das erste Argument der Callback-Funktion ist der Wert des Arrays oder Objekts am entsprechenden Index oder Schlüssel, das zweite Argument ist der Index des Arrays oder der Schlüssel des Objekts. Die Callback-Funktion kann jeden beliebigen Wert zurückgeben. Wenn ein Array zurückgegeben wird, wird dieses Array entfaltet. Wenn `null` oder `undefined` zurückgegeben wird, wird dieser Wert ignoriert. Innerhalb der Callback-Funktion zeigt `this` auf das `window`-Objekt. ```js // Über ein Array iterieren const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // Wenn die Callback-Funktion ein Array zurückgibt, wird dieses entfaltet const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // Über ein Objekt iterieren const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} Prüft, ob ein Knoten einen anderen Knoten enthält. Gibt `true` zurück, wenn der übergeordnete Knoten den untergeordneten Knoten enthält, andernfalls `false`. ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## Datentypüberprüfung {#api-type} ### `.is()` {#is} Prüft, ob mindestens ein Element in der Sammlung mit dem Argument übereinstimmt. Gibt `true` zurück, wenn eine Übereinstimmung vorliegt, andernfalls `false`. Das Argument kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen, ein JQ-Objekt oder eine Callback-Funktion sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. Wenn die Funktion `true` zurückgibt, stimmt das aktuelle Element mit dem Argument überein; wenn `false` zurückgegeben wird, stimmt es nicht überein. ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // Prüfung anhand des Rückgabewerts der Callback-Funktion $(document).is(function (index, element) { return element === document; }); // true ``` ## Objektzugriff {#api-object} ### `.length` {#length} Gibt die Anzahl der Elemente in der aktuellen Sammlung zurück. ```js $('body').length; // 1 ``` ### `.each()` {#each} Iteriert über die aktuelle Sammlung und führt eine Funktion für jedes Element in der Sammlung aus. Wenn die Funktion `false` zurückgibt, wird die Iteration gestoppt. Das erste Argument der Funktion ist der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} Iteriert über die aktuelle Sammlung, führt eine Funktion für jedes Element in der Sammlung aus und gibt eine neue Sammlung der Rückgabewerte der Funktion zurück. Die Funktion kann einzelne Werte oder Arrays von Werten zurückgeben. Wenn ein Array zurückgegeben wird, werden die Elemente des Arrays nacheinander zur neuen Sammlung hinzugefügt. Wenn die Funktion `null` oder `undefined` zurückgibt, wird dieser Wert nicht zur neuen Sammlung hinzugefügt. Das erste Argument der Funktion ist der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result ist ein JQ-Objekt der Werte der übereinstimmenden Elemente ``` ### `.eq()` {#eq} Gibt eine neue Sammlung zurück, die nur das Element am angegebenen Index enthält. ```js $('div').eq(0); // Gibt eine Sammlung zurück, die nur das erste Element enthält $('div').eq(-1); // Gibt eine Sammlung zurück, die nur das letzte Element enthält $('div').eq(-2); // Gibt eine Sammlung zurück, die nur das vorletzte Element enthält ``` ### `.first()` {#first} Gibt eine neue Sammlung zurück, die nur das erste Element der aktuellen Sammlung enthält. ```js $('div').first(); // Gibt eine Sammlung zurück, die nur das erste div enthält ``` ### `.last()` {#last} Gibt eine neue Sammlung zurück, die nur das letzte Element der aktuellen Sammlung enthält. ```js $('div').last(); // Gibt eine Sammlung zurück, die nur das letzte div enthält ``` ### `.get()` {#get} Gibt das Element am angegebenen Index zurück. Wenn kein Argument übergeben wird, gibt es ein Array aller Elemente in der Sammlung zurück. ```js $('div').get(); // Gibt ein Array aller div-Elemente zurück $('div').get(0); // Gibt das erste div-Element zurück $('div').get(-1); // Gibt das letzte div-Element zurück ``` ### `.index()` {#index} Wenn kein Argument übergeben wird, gibt es den Index des ersten Elements der aktuellen Sammlung relativ zu seinen Geschwisterelementen zurück. Wenn ein CSS-Selektor übergeben wird, gibt es den Index des ersten Elements der aktuellen Sammlung relativ zu den Elementen zurück, die dem CSS-Selektor entsprechen. Wenn ein DOM-Element übergeben wird, gibt es den Index dieses Elements in der aktuellen Sammlung zurück. Wenn ein JQ-Objekt übergeben wird, gibt es den Index des ersten Elements des Objekts in der aktuellen Sammlung zurück. ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} Gibt eine Teilmenge der aktuellen Sammlung zurück. Sie können den Start- und Endpunkt der Teilmenge angeben, indem Sie zwei Argumente übergeben (das Element am Endpunkt ist nicht inbegriffen). Wenn das zweite Argument nicht übergeben wird, werden alle Elemente vom Startpunkt bis zum Ende der Sammlung zurückgegeben. ```js // Gibt alle Elemente ab dem dritten (einschließlich) zurück $('div').slice(3); // Gibt die Elemente zwischen dem dritten und fünften (einschließlich drittes, ausschließlich fünftes) zurück $('div').slice(3, 5); ``` ### `.filter()` {#filter} Filtert Elemente aus der aktuellen Sammlung, die mit dem angegebenen Ausdruck übereinstimmen. Das Argument kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen oder eine Callback-Funktion sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. Wenn die Funktion `true` zurückgibt, wird das aktuelle Element beibehalten; wenn `false` zurückgegeben wird, wird es entfernt. ```js // Alle div-Elemente mit der Klasse .box herausfiltern $('div').filter('.box'); // Alle ausgewählten Optionen herausfiltern $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} Filtert Elemente aus der aktuellen Sammlung, die nicht mit dem angegebenen Ausdruck übereinstimmen. Das Argument kann ein CSS-Selektor, ein DOM-Element, ein Array von DOM-Elementen, ein JQ-Objekt oder eine Callback-Funktion sein, die einen `boolean`-Wert zurückgibt. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument das aktuelle Element. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. Wenn die Funktion `true` zurückgibt, wird das aktuelle Element entfernt; wenn `false` zurückgegeben wird, wird es beibehalten. ```js // Alle div-Elemente ohne die Klasse .box herausfiltern $('div').not('.box'); // Alle nicht ausgewählten Optionen herausfiltern $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS-Klassen {#api-css} ### `.hasClass()` {#hasClass} Prüft, ob das erste Element der Sammlung eine bestimmte CSS-Klasse enthält. ```js // Prüft, ob das erste div-Element die Klasse .item enthält $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} Fügt jedem Element in der Sammlung eine CSS-Klasse hinzu. Mehrere Klassennamen können durch Leerzeichen getrennt werden. Das Argument kann ein String oder eine Callback-Funktion sein, die die CSS-Klassennamen zurückgibt. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche CSS-Klasse des Elements. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. ```js // Fügt allen div-Elementen die Klasse .item hinzu $('div').addClass('item'); // Fügt allen div-Elementen die Klassen .item1 und .item2 hinzu $('div').addClass('item1 item2'); // Fügt allen div-Elementen die von der Callback-Funktion zurückgegebene CSS-Klasse hinzu $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} Entfernt bestimmte CSS-Klassen von jedem Element in der Sammlung. Mehrere Klassennamen können durch Leerzeichen getrennt werden. Das Argument kann ein String oder eine Callback-Funktion sein, die die CSS-Klassennamen zurückgibt. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche CSS-Klasse des Elements. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. Wenn kein Argument übergeben wird, entfernt diese Methode direkt das `class`-Attribut des Elements. ```js // Entfernt die Klasse .item von allen div-Elementen $('div').removeClass('item'); // Entfernt die Klassen .item1 und .item2 von allen div-Elementen $('div').removeClass('item1 item2'); // Entfernt die von der Callback-Funktion zurückgegebene CSS-Klasse von allen div-Elementen $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} Wenn das Element eine bestimmte CSS-Klasse hat, wird sie entfernt; wenn nicht, wird sie hinzugefügt. Mehrere Klassennamen können durch Leerzeichen getrennt werden. Das Argument kann ein String oder eine Callback-Funktion sein, die die CSS-Klassennamen zurückgibt. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument die ursprüngliche CSS-Klasse des Elements. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. ```js // Schaltet die Klasse .item für alle div-Elemente um $('div').toggleClass('item'); // Schaltet die Klassen .item1 und .item2 für alle div-Elemente um $('div').toggleClass('item1 item2'); // Schaltet die von der Callback-Funktion zurückgegebene CSS-Klasse für alle div-Elemente um $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## Knotenattribute {#api-attr} ### `.prop()` {#prop} Ruft den Wert einer JavaScript-Property des ersten Elements in der Sammlung ab. ```js // Wert der checked-Property des ersten Elements abrufen $('input').prop('checked'); ``` Wenn zwei Argumente übergeben werden, setzt diese Methode die angegebene JavaScript-Property für alle Elemente in der Sammlung. Der Property-Wert kann ein Wert beliebigen Typs oder der Rückgabewert einer Callback-Funktion sein. Das erste Argument der Callback-Funktion ist der Index des Elements, das zweite Argument der ursprüngliche Property-Wert des Elements. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. Wenn der Property-Wert oder der Rückgabewert der Callback-Funktion `undefined` ist, ändert diese Methode die ursprüngliche Property des Elements nicht. ```js // Setzt die checked-Property aller ausgewählten Elemente auf true $('input').prop('checked', true); // Setzt den Property-Wert über den Rückgabewert der Callback-Funktion $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` Sie können auch mehrere Properties gleichzeitig setzen, indem Sie ein Objekt übergeben. ```js // Mehrere Property-Werte eines Elements gleichzeitig setzen $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} Löscht die angegebene JavaScript-Property von allen Elementen in der Sammlung. ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} Ruft den Wert eines HTML-Attributs des ersten Elements in der Sammlung ab. ```js // Wert des Attributs des ersten Elements abrufen $('div').attr('username'); ``` Wenn zwei Argumente übergeben werden, setzt diese Methode das angegebene HTML-Attribut für alle Elemente in der Sammlung. Der Attributwert kann ein String, ein numerischer Wert oder der Rückgabewert einer Callback-Funktion sein. Wenn das Argument eine Callback-Funktion ist, ist das erste Argument der Funktion der Index des Elements, das zweite Argument der ursprüngliche Attributwert des Elements. Innerhalb der Funktion zeigt `this` auf das aktuelle Element. Wenn der Attributwert oder der Rückgabewert der Callback-Funktion `null` ist, löscht diese Methode das angegebene Attribut; wenn `undefined` zurückgegeben wird, wird das ursprüngliche Attribut des Elements nicht geändert. ```js // Setzt den Attributwert für alle ausgewählten Elemente $('div').attr('username', 'mdui'); // Setzt den Attributwert über den Rückgabewert der Callback-Funktion $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` Sie können auch mehrere Attribute gleichzeitig setzen, indem Sie ein Objekt übergeben. ```js // Mehrere Attributwerte eines Elements gleichzeitig setzen $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} Löscht das angegebene HTML-Attribut von allen Elementen in der Sammlung. Mehrere Attributnamen können durch Leerzeichen getrennt werden. ```js // Löscht ein Attribut von allen Elementen in der Sammlung $('div').removeAttr('username'); // Löscht mehrere Attribute von allen Elementen in der Sammlung $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} Gibt den Wert des ersten Elements in der Sammlung zurück. Wenn das Element ein ``, `` oder `