# mdui v2 Documentation

mdui is an front-end component library based on Material Design 3, using Web Components, supporting dynamic colors, dark mode, and lightweight efficiency.

## Erste Schritte

- [Übersicht](https://www.mdui.org/de/docs/2/index.md): mdui ist eine erstklassige Web Components-Bibliothek mit 50+ Material Design-Komponenten. Unterstützt Dark Mode, Lokalisierung und TypeScript für moderne Web-Anwendungen.
- [Installation](https://www.mdui.org/de/docs/2/getting-started/installation.md): Installieren Sie mdui per npm, pnpm oder CDN. Unterstützt vollständige oder selektive Imports zur Reduzierung der Paketgröße und für eine nahtlose Projekt-Integration.
- [Quick Start](https://www.mdui.org/de/docs/2/getting-started/usage.md): Basierend auf Web Components bietet mdui Details zu Attributen, Properties, Methoden, Events und Slots. Meistern Sie die Komponenten-Updates sowie das Shadow DOM-Styling.
- [TypeScript-Unterstützung](https://www.mdui.org/de/docs/2/getting-started/typescript-support.md): mdui ist in TypeScript geschrieben und bietet präzise Typdefinitionen. Nutzen Sie Autovervollständigung und Typprüfung für eine effiziente und fehlerfreie Entwicklung.
- [IDE-Unterstützung](https://www.mdui.org/de/docs/2/getting-started/ide-support.md): Optimiert für VS Code und WebStorm bietet mdui Code-Vervollständigung und Hover-Hinweise. Die volle HTML/CSS-Datenunterstützung steigert Ihre Projekt-Produktivität enorm.
- [Lokalisierung](https://www.mdui.org/de/docs/2/getting-started/localization.md): Integrierte Mehrsprachigkeit mit 50+ Sprachpaketen. Unterstützt Lazy Loading und statische Imports via CDN oder npm. Erstellen Sie globale Apps mit Lokalisierungs-Events.
- [Häufig gestellte Fragen (FAQ)](https://www.mdui.org/de/docs/2/getting-started/faq.md): Häufige Fragen aus der mdui-Community mit offiziellen Antworten. Finden Sie Lösungen für FOUC-Prävention and mehr, inklusive hilfreicher Code-Beispiele für Ihre Web-App.

## KI-gestützte Entwicklung

- [LLMs.txt](https://www.mdui.org/de/docs/2/ai/llms.md): mdui bietet llms.txt/llms-full.txt für KI-Kontext. Markdown-Dokumente unterstützen direktes Kopieren und verbessern so die Genauigkeit der KI-Antworten in Ihrem Projekt.
- [MCP-Server](https://www.mdui.org/de/docs/2/ai/mcp.md): @mdui/mcp integriert den MCP-Server für KI-Agenten wie Cursor. Fragen Sie Attribute und CSS Custom Properties ab, um die KI-gestützte Entwicklung Ihrer App zu vertiefen.

## Stile

- [Dark Mode](https://www.mdui.org/de/docs/2/styles/dark-mode.md): Alle Komponenten bieten einen Dark Mode. Die Aktivierung erfolgt per Systemvorgabe oder manuell via setTheme. Unterstützt globale oder lokale Theme-Overrides der App-UI.
- [Dynamic Color](https://www.mdui.org/de/docs/2/styles/dynamic-color.md): Erzeugen Sie helle und dunkle Paletten aus einer Basisfarbe oder einem Bild. Nutzen Sie setColorScheme für harmonische Farbschemata in Ihrer modernen Web-Anwendung.
- [Typografie](https://www.mdui.org/de/docs/2/styles/prose.md): mdui-prose und mdui-table optimieren Artikel- sowie Tabellenlayouts. Erhalten Sie elegante Typografie, Zeilenhöhen und Abstände mühelos für alle dynamischen Web-Inhalte.
- [Design-Tokens](https://www.mdui.org/de/docs/2/styles/design-tokens.md): Das Design-Tokens-System nutzt CSS Custom Properties. Über 100 Tokens für Farben oder Ecken lassen sich leicht anpassen, um ein einzigartiges Markendesign zu kreieren.

## Integration mit Frameworks

- [Integration mit React](https://www.mdui.org/de/docs/2/frameworks/react.md): Dank Web Components lässt sich mdui nahtlos in React integrieren. Volle TypeScript-Unterstützung für Event-Binding und Property-Syncing gemäß aktuellen Best Practices.
- [Integration mit Vue](https://www.mdui.org/de/docs/2/frameworks/vue.md): Einfache Vue 3-Integration mittels Konfiguration des Template-Compilers. Bietet v-model-Support, Custom-Events, TypeScript-Typen und intelligente IDE-Vorschläge für Sie.
- [Integration mit Angular](https://www.mdui.org/de/docs/2/frameworks/angular.md): Angular erfordert das CUSTOM_ELEMENTS_SCHEMA für Web Components. Wir bieten detaillierte Anleitungen für DI, Two-Way-Binding und vollständige TypeScript-Typdefinitionen.
- [Integration mit anderen Frameworks](https://www.mdui.org/de/docs/2/frameworks/others.md): Basierend auf Standards lässt sich mdui in Frameworks wie Svelte, Next.js oder Nuxt integrieren. Wir bieten Integrationsleitfäden sowie gängige Best Practices.

## Komponenten

- [Avatar-Komponente](https://www.mdui.org/de/docs/2/components/avatar.md): Avatare repräsentieren Nutzer oder Marken per Bild, Icon oder Text. Unterstützt kreisförmige oder quadratische Formen sowie diverse Größen für Profile und Kommentare.
- [Badge-Komponente](https://www.mdui.org/de/docs/2/components/badge.md): Badges zeigen Zähler oder Statuslabel an. Sie unterstützen kleine und große Versionen mit Zahlen oder Text und lassen sich so mühelos für Benachrichtigungen verwenden.
- [Bottom App Bar-Komponente](https://www.mdui.org/de/docs/2/components/bottom-app-bar.md): Die Bottom App Bar bietet mobile Navigation und Aktionen am unteren Rand. Integriert FABs und Menüs mit Support für Scroll-Hide sowie individuelle Farben für Designs.
- [Button-Komponente](https://www.mdui.org/de/docs/2/components/button.md): Buttons unterstützen elevated, filled, tonal, outlined und text Stile. Mit Icons, Ladezustand und Barrierefreiheit gemäß Material Design 3-Vorgaben für Web-Interfaces.
- [Icon Button-Komponente](https://www.mdui.org/de/docs/2/components/button-icon.md): Icon Buttons für sekundäre Aktionen unterstützen standard, filled, tonal und outlined Stile. Inklusive Ladezustand und Link-Support, ideal für Toolbars und Karten-Header.
- [Card-Komponente](https://www.mdui.org/de/docs/2/components/card.md): Cards sind vielseitige Container für Inhalte und Aktionen. Sie unterstützen elevated, filled und outlined Stile mit Klick-, Link- und Medien-Support für Web-Interfaces.
- [Checkbox-Komponente](https://www.mdui.org/de/docs/2/components/checkbox.md): Checkboxes erlauben die Mehrfachauswahl mit Zuständen wie ausgewählt, nicht ausgewählt oder unbestimmt. Inklusive benutzerdefinierter Icons, Validierung und Form-Support.
- [Chip-Komponente](https://www.mdui.org/de/docs/2/components/chip.md): Chips stehen für Eingabe, Auswahl oder Filterung. Varianten wie assist, filter, input und suggestion unterstützen Checkable- oder Removable-States zur Kategorisierung.
- [Circular Progress-Komponente](https://www.mdui.org/de/docs/2/components/circular-progress.md): Circular Progress zeigt den Abschluss durch Kreisbalken. Unterstützt determinate und Spinner-Modi mit individuellen Größen für Buttons oder das Laden von Seiteninhalten.
- [Collapse-Komponente](https://www.mdui.org/de/docs/2/components/collapse.md): Collapse gruppiert hierarchische Inhalte platzsparend. Unterstützt Akkordeon-Modus, benutzerdefinierte Trigger und deaktivierte Zustände für FAQ oder App-Einstellungen.
- [Dialog-Komponente](https://www.mdui.org/de/docs/2/components/dialog.md): Dialoge für wichtige Infos oder Entscheidungen. Unterstützt Icons, Titel und Buttons in modalen oder Vollbild-Modi. Bietet zudem alert, confirm und prompt Funktionen an.
- [Divider-Komponente](https://www.mdui.org/de/docs/2/components/divider.md): Divider bieten eine visuelle Trennung für Listen und Layouts. Unterstützt horizontale oder vertikale Modi mit Insets für eine klare Interface-Hierarchie in Ihrer Web-App.
- [Dropdown-Komponente](https://www.mdui.org/de/docs/2/components/dropdown.md): Dropdowns öffnen Popover-Inhalte an Klick- oder Cursor-Positionen. Unterstützt Trigger wie Hover oder Fokus und adaptive Positionierung für vielseitige Interaktionen.
- [Floating Action Button-Komponente](https://www.mdui.org/de/docs/2/components/fab.md): Der Floating Action Button hebt Primäraktionen in zwei Formen und drei Größen hervor. Mit Icons und Ladezuständen für einen schnellen Zugriff auf wichtige Funktionen.
- [Icon-Komponente](https://www.mdui.org/de/docs/2/components/icon.md): Icons repräsentieren Aktionen per Material Icons oder benutzerdefinierten SVGs. Größe und Rotation sind per CSS anpassbar für bessere Erkennbarkeit in Web-Interfaces.
- [Layout-Komponente](https://www.mdui.org/de/docs/2/components/layout.md): Das Layout organisiert App-Bars, Drawer und Content-Bereiche. Ein responsives Grid-System mit Breakpoints und Abständen hilft beim Aufbau von Website-Strukturen.
- [Linear Progress-Komponente](https://www.mdui.org/de/docs/2/components/linear-progress.md): Linear Progress zeigt den Fortschritt per horizontalem Balken. Mit Modi für determinate/indeterminate sowie anpassbaren Farben für Lade- oder Upload-Benutzeroberflächen.
- [Liste-Komponente](https://www.mdui.org/de/docs/2/components/list.md): Listen zeigen vertikale Sammlungen an. Unterstützt ein- bis dreizeilige Modi, Icons, Avatare und Links. Perfekt für Navigationsmenüs, Kontakte oder organisierte Inhalte.
- [Menü-Komponente](https://www.mdui.org/de/docs/2/components/menu.md): Menüs zeigen vertikale Aktionslisten mit Unterstützung für Auswahlmodi, Gruppen und Tastenkürzel. Ideal für Kontextmenüs mit verschachtelten Untermenüs in Ihrer Web-UI.
- [Navigation Bar-Komponente](https://www.mdui.org/de/docs/2/components/navigation-bar.md): Die Navigation Bar dient dem Hauptseiten-Wechsel auf Mobilgeräten. Unterstützt 3–5 Elemente mit Icons und Badges sowie Auto-Hide beim Scrollen für ein modernes App-Design.
- [Navigation Drawer-Komponente](https://www.mdui.org/de/docs/2/components/navigation-drawer.md): Navigation Drawer gleiten zur Navigation von der Seite ein. Unterstützt modalen/nicht-modalen Modus für links oder rechts mit Nutzerdaten, Listenelementen und Divider-Trennern.
- [Navigation Rail-Komponente](https://www.mdui.org/de/docs/2/components/navigation-rail.md): Die Navigation Rail bietet kompakte Seiten-Navigation für Tablets und Desktops. Unterstützt Badges, Trenner und individuelle Ausrichtung mit Icons und optionalen Labels.
- [Radio-Komponente](https://www.mdui.org/de/docs/2/components/radio.md): Radio Buttons ermöglichen eine exklusive Auswahl, bei der nur eine Option aktiv sein kann. Inklusive benutzerdefinierter Icons und deaktivierter Zustände für Formulare.
- [Range Slider-Komponente](https://www.mdui.org/de/docs/2/components/range-slider.md): Range Slider ermöglichen die Auswahl von Wertebereichen per Doppel-Slider. Mit Schrittsteuerung und Werttipps für Preisspannen, Zeitintervalle oder Parameter in Ihrer UI.
- [Select-Komponente](https://www.mdui.org/de/docs/2/components/select.md): Der Select ermöglicht die Einzel- oder Mehrfachauswahl in einem Dropdown. Mit Labels, Validierung und Icons für Logik, Dateneingabe oder die komplexe Filterung von Daten.
- [Segmented Button-Komponente](https://www.mdui.org/de/docs/2/components/segmented-button.md): Segmented Buttons erlauben die Einzel- oder Mehrfachauswahl zum Filtern oder Umschalten von Ansichten. Eine Kernkomponente für UI-Steuerungen mit Icons und Spezialstilen.
- [Slider-Komponente](https://www.mdui.org/de/docs/2/components/slider.md): Slider zur Wertauswahl unterstützen inkrementelle Steuerung sowie eine Skalenanzeige. Mit Validierung und Autofokus-Features für Lautstärke, Helligkeit oder Datenfilter.
- [Snackbar-Komponente](https://www.mdui.org/de/docs/2/components/snackbar.md): Snackbars bieten Kurz-Feedback mit Aktionsbuttons und automatischem Schließen. Unterstützt eigene Farben, Positionen sowie programmatische Aufrufe zur User Experience.
- [Switch-Komponente](https://www.mdui.org/de/docs/2/components/switch.md): Der Switch schaltet Einstellungen sofort ein oder aus. Er unterstützt benutzerdefinierte Farben, Icons und Validierung für schnelles Feedback in Ihren App-Einstellungen.
- [Tabs-Komponente](https://www.mdui.org/de/docs/2/components/tabs.md): Tabs erlauben den Wechsel zwischen Ansichten in einem Bereich. Mit primary/secondary Stilen, Icons und Badges für eine Navigation oder die Seiten-Paginierung der Web-App.
- [Text Field-Komponente](https://www.mdui.org/de/docs/2/components/text-field.md): Das Text Field unterstützt ein- und mehrzeilige Eingaben für Passwörter oder E-Mails. Mit Icons, Validierung und Auto-Height-Support für moderne online Web-Formulare.
- [Tooltip-Komponente](https://www.mdui.org/de/docs/2/components/tooltip.md): Tooltips zeigen Zusatzinfos bei Hover oder Fokus. Unterstützt Rich-Text, Platzierung und Zeitverzögerungen, um Nutzer beim Verständnis Ihrer App-Funktion zu unterstützen.
- [Top App Bar-Komponente](https://www.mdui.org/de/docs/2/components/top-app-bar.md): Die Top App Bar bietet Titel, Navigation und Aktionen am oberen Rand. Diverse Stile, Scrolleffekte und Custom-Buttons bieten einen einheitlichen Header zur Navigation.

## Funktionen

- [jq-Toolkit](https://www.mdui.org/de/docs/2/functions/jq.md): mdui enthält eine integrierte, leichtgewichtige JavaScript-Bibliothek mit jQuery-ähnlicher API. Sie unterstützt DOM, Events und Animationen ohne externe Abhängigkeiten.
- [dialog-Funktion](https://www.mdui.org/de/docs/2/functions/dialog.md): Die dialog-Funktion ist ein programmatischer Wrapper für mdui-dialog. Öffnen Sie Modale per JS ohne HTML-Code und verarbeiten Sie Nutzerinteraktionen einfach per Promise.
- [alert-Funktion](https://www.mdui.org/de/docs/2/functions/alert.md): alert ist eine moderne Alternative zu window.alert basierend auf mdui-dialog. Zeigen Sie Themen-konforme Dialoge mit Titeln und Buttons, ohne das Rendering zu blockieren.
- [confirm-Funktion](https://www.mdui.org/de/docs/2/functions/confirm.md): confirm ist ein Material Design-Ersatz für window.confirm. Zeigen Sie programmatische Bestätigungsdialoge und verarbeiten Sie die Nutzerwahl durch ein einfaches Promise.
- [prompt-Funktion](https://www.mdui.org/de/docs/2/functions/prompt.md): prompt ersetzt window.prompt im Material Design-Stil. Erfasst Benutzereingaben per Dialog mit Validierung und Rückgabetyp. Gibt die eingegebenen Werte via Promise zurück.
- [snackbar-Funktion](https://www.mdui.org/de/docs/2/functions/snackbar.md): snackbar ist ein programmatischer Aufruf für mdui-snackbar. Zeigen Sie Feedback-Meldungen mit Dauer und Positionierung ohne HTML für sofortige Web-Benachrichtigungen.
- [getTheme-Funktion](https://www.mdui.org/de/docs/2/functions/getTheme.md): getTheme ruft die Theme-Einstellungen der Seite oder Elemente ab. Unterstützt light, dark und auto Modi zur Anpassung von Logik oder Stilen an das aktive Nutzer-Theme.
- [setTheme-Funktion](https://www.mdui.org/de/docs/2/functions/setTheme.md): setTheme legt das light, dark oder auto Theme für Seite oder Elemente dynamisch fest. Unterstützt globale oder lokale Theme-Overrides für eine moderne Nutzererfahrung.
- [getColorFromImage-Funktion](https://www.mdui.org/de/docs/2/functions/getColorFromImage.md): getColorFromImage extrahiert dominante Farben aus Bildern als Hex-Werte. Nutzen Sie dies mit setColorScheme für automatisch harmonische Farbpaletten passend zum Inhalt.
- [setColorScheme-Funktion](https://www.mdui.org/de/docs/2/functions/setColorScheme.md): setColorScheme erzeugt volle Material Design-Paletten aus einem Hex-Farbwert. Unterstützt globale oder lokale Einstellungen für schnelles Branding und Designs Ihrer App.
- [removeColorScheme-Funktion](https://www.mdui.org/de/docs/2/functions/removeColorScheme.md): removeColorScheme entfernt Farbschemata, um die Standardpalette wiederherzustellen. Kann global oder auf Elemente angewendet werden, ideal für Theme-Resets Ihrer Web-App.
- [loadLocale-Funktion](https://www.mdui.org/de/docs/2/functions/loadLocale.md): loadLocale lädt Sprachpakete für die App-Lokalisierung. Unterstützt Lazy Loading, Pre-Loading und statische Methoden für über 50 Sprachen mit optimierter Web-Performance.
- [setLocale-Funktion](https://www.mdui.org/de/docs/2/functions/setLocale.md): setLocale legt Sprachcodes asynchron fest. Dies triggert sofortige Komponenten-Updates für eine nahtlose Lokalisierung Ihrer Anwendung, ohne die Webseite neu zu laden.
- [getLocale-Funktion](https://www.mdui.org/de/docs/2/functions/getLocale.md): getLocale gibt den aktuellen Sprachcode der App zurück. Nutzen Sie ihn zur Umgebungserkennung, zum Laden von Ressourcen oder für Layout-Anpassungen Ihrer Web-Anwendung.
- [throttle-Funktion](https://www.mdui.org/de/docs/2/functions/throttle.md): throttle erstellt Drosselfunktionen zur Begrenzung der Ausführungsfrequenz. Ideal für Hochfrequenz-Events wie Scrollen oder Resize, um die App-Performance zu erhöhen.
- [observeResize-Funktion](https://www.mdui.org/de/docs/2/functions/observeResize.md): observeResize überwacht Elementgrößenänderungen per ResizeObserver-API. Triggert Callbacks für responsive Layouts oder adaptive Container mit Aufräum-Funktionen.
- [breakpoint-Funktion](https://www.mdui.org/de/docs/2/functions/breakpoint.md): Überprüft responsive Breakpoints wie xs, sm, md, lg, xl oder xxl. Bewertet, ob die Breite größer, kleiner oder in einem Bereich für eine benutzerdefinierte UI-Logik.

## Pakete

- [Icon-Komponentenbibliothek @mdui/icons](https://www.mdui.org/de/docs/2/libraries/icons.md): Eigenständige Material Icons-Bibliothek mit allen Google-Icons. Optimiert für Tree-Shaking und On-Demand-Imports, um die Bundle-Größen Ihrer Projekte zu reduzieren.