diff --git a/docs/30-components/abbr.mdx b/docs/30-components/abbr.mdx index 1fa9eb0832..20f62605df 100644 --- a/docs/30-components/abbr.mdx +++ b/docs/30-components/abbr.mdx @@ -24,8 +24,7 @@ Standard-Abkürzung mit optionalem Label: ## Barrierefreiheit @@ -70,7 +69,7 @@ Die Komponente eignet sich zur Kennzeichnung von Abkürzungen innerhalb von Flie ### Playground - + ### Funktionalitäten (mit Code) @@ -81,8 +80,7 @@ Abkürzung als reines Text-Element ohne zusätzliche Erklärung: #### Abkürzung mit Label @@ -92,8 +90,7 @@ Abkürzung mit ausgeschriebener Erklärung über das `_label`-Attribut: ## API diff --git a/docs/30-components/accordion.mdx b/docs/30-components/accordion.mdx index c1d38fa57e..8a6abca60f 100644 --- a/docs/30-components/accordion.mdx +++ b/docs/30-components/accordion.mdx @@ -21,7 +21,7 @@ import BetaDocsBanner from '@site/src/components/BetaDocsBanner'; Darstellung der Komponente ohne optional gesetzte Felder. Code kann eingeblendet werden. - + ## Barrierefreiheit @@ -128,7 +128,6 @@ Wenn ein Inhalt voraussichtlich direkt benötigt wird oder dies fachlich sinnvol 'Das Frühjahr bringt den Übergang vom Winter zum Sommer. Die Temperaturen steigen langsam, die Tage werden länger, und die Natur erwacht aus dem Winterschlaf: Pflanzen beginnen zu blühen, Bäume treiben neue Knospen, und viele Tierarten aktivieren ihre Fortpflanzungszyklen. Typisch sind wechselhaftes Wetter mit warmen sonnigen Phasen und kühleren Regentagen.', _label: 'Der Frühling', }} - codeCollapsable /> ### Funktionalitäten (mit Code) @@ -145,7 +144,6 @@ Die sichtbare Überschrift wird über `_label` gesetzt. Der Inhaltsbereich wird 'Der Sommer ist die wärmste Jahreszeit mit längsten Tagen und kürzesten Nächten. Die Sonne steht höher am Himmel, was zu intensiverer Einstrahlung führt. Temperaturen erreichen ihre Höchstwerte, Niederschläge treten oft als kurze Gewitter statt als langanhaltender Regen auf. Es ist die Hauptsaison für Vegetation und landwirtschaftliches Wachstum.', _label: 'Der Sommer', }} - codeCollapsable /> #### Überschriftenstruktur @@ -160,7 +158,6 @@ Die Überschriftenebene wird über `_level` gesteuert. _slot: 'Im Herbst nimmt die Tageslänge deutlich ab, die Temperaturen fallen allmählich. Laubbäume verlieren ihr grünes Blattwerk durch die verkürzte Photosyntheseperiode, was zu charakteristischen Braun- und Gelbtönen führt. Die Erntezeit für viele Kulturpflanzen liegt in dieser Jahreszeit. Nebel und spätere Sonnenaufgänge werden häufiger.', }} - codeCollapsable /> #### Zustandssteuerung @@ -175,7 +172,6 @@ Das initiale Öffnen erfolgt über `_open`. Für den nicht interaktiven Zustand _slot: 'Die kalte Jahreszeit mit den kürzesten Tagen und längsten Nächten. Die niedrige Sonnenposition sorgt für geringe Einstrahlungsintensität. Temperaturen fallen unter den Gefrierpunkt, was in vielen Regionen Schnee und Eis ermöglicht. Pflanzen ruhen, viele Tiere halten Winterruhe oder migrieren. Die natürliche Lichtverfügbarkeit ist am geringsten.', }} - codeCollapsable /> #### Event-Anbindung diff --git a/docs/30-components/alert.mdx b/docs/30-components/alert.mdx index 374113557a..c87a34a703 100644 --- a/docs/30-components/alert.mdx +++ b/docs/30-components/alert.mdx @@ -25,8 +25,7 @@ Standard-Alert mit Typ, Variante und Inhalt: ## Barrierefreiheit @@ -63,7 +62,7 @@ Standard-Alert mit Typ, Variante und Inhalt: ### Playground - + ### Funktionalitäten (mit Code) @@ -74,8 +73,7 @@ Der Typ des Alert wird über das Attribut `_type` festgelegt und bestimmt die se | Typ | Bedeutung | @@ -93,8 +91,7 @@ Der Typ des Alert wird über das Attribut `_type` festgelegt und bestimmt die se | Variante | Beschreibung | @@ -109,8 +106,7 @@ Die Überschrift wird über `_label` festgelegt, die semantische Ebene über `_l #### Inhalt des Alert @@ -120,8 +116,7 @@ Der Inhalt des Alert wird als Slot-Inhalt übergeben und kann beliebigen HTML-Co #### Schließen-Funktion @@ -131,8 +126,7 @@ Mit dem Attribut `_has-closer` wird ein Schließen-Button eingeblendet. #### Screenreader-Benachrichtigungen (`_alert`) @@ -142,8 +136,7 @@ Das Attribut `_alert` aktiviert `role="alert"` bzw. `aria-live="assertive"`, sod #### Events diff --git a/docs/30-components/avatar.mdx b/docs/30-components/avatar.mdx index 54e10727e1..b8fbec27e4 100644 --- a/docs/30-components/avatar.mdx +++ b/docs/30-components/avatar.mdx @@ -24,7 +24,6 @@ Darstellung der Komponente in der Standard-Ansicht. Code kann eingeblendet werde ## Barrierefreiheit @@ -65,7 +64,6 @@ Testen Sie die verschiedenen Eigenschaften der Avatar-Komponente: ### Funktionalitäten @@ -77,8 +75,7 @@ Darstellung der Komponente ohne Bild – es werden automatisch die Initialen aus #### Avatar mit Bild @@ -91,8 +88,7 @@ Darstellung eines Avatar-Bildes über das Attribut `_src`: _label: 'Bei dem gleich gezeigten Bild handelt es sich um einen Standard-Avatar aus Font Awesome', _src: 'https://gravatar.com/avatar/12345?d=mp&s=256' }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Farbige Initialen @@ -102,8 +98,7 @@ Verwendung des Attributs `_color` zur farblichen Unterscheidung von Benutzern. D #### Avatar mit separaten Farben @@ -116,8 +111,7 @@ Präzise Kontrolle über Hintergrund- und Vordergrundfarbe: _label: 'Julia Wolf', _color: { backgroundColor: '#4ECDC4', foregroundColor: '#FFFFFF' } }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> ## API diff --git a/docs/30-components/badge.mdx b/docs/30-components/badge.mdx index 210c1a4285..949d6838ca 100644 --- a/docs/30-components/badge.mdx +++ b/docs/30-components/badge.mdx @@ -23,8 +23,7 @@ Darstellung eines einfachen Badges mit Hintergrundfarbe und Icon: ## Barrierefreiheit @@ -65,7 +64,6 @@ Darstellung eines einfachen Badges mit Hintergrundfarbe und Icon: ### Funktionalitäten (mit Code) @@ -77,7 +75,6 @@ Das Label ist erforderlich und definiert den Text, der im Badge angezeigt wird. | Property | Beschreibung | @@ -91,7 +88,6 @@ Die Hintergrundfarbe wird über das Attribut `_color` definiert. Die Textfarbe w | Property | Beschreibung | Default | @@ -105,7 +101,6 @@ Icons können als String (Klassenname) oder als komplexes Icon-Objekt mit horizo | Property | Beschreibung | @@ -119,7 +114,6 @@ Das Badge kann mit einem Smart-Button verknüpft werden, der eine Aktion auslös | Property | Beschreibung | diff --git a/docs/30-components/breadcrumb.mdx b/docs/30-components/breadcrumb.mdx index 24411cd65d..1138bb39cc 100644 --- a/docs/30-components/breadcrumb.mdx +++ b/docs/30-components/breadcrumb.mdx @@ -22,7 +22,6 @@ import BetaDocsBanner from '@site/src/components/BetaDocsBanner'; Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren Links: @@ -72,9 +71,7 @@ Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren ### Playground - + ### Funktionalitäten (mit Code) @@ -83,8 +80,7 @@ Darstellung der Komponente mit den grundlegenden Eigenschaften und navigierbaren Die Breadcrumb-Navigation wird über das Attribut `_links` als Array von Link-Objekten konfiguriert. Das letzte Element wird automatisch als aktuelle Seite (ohne Link) behandelt. **Link-Eigenschaften:** @@ -103,7 +99,6 @@ Icons können optional zu jedem Element hinzugefügt werden. Eine häufige Verwe ### Events diff --git a/docs/30-components/button-link.mdx b/docs/30-components/button-link.mdx index d0a592fb74..857e9ddfe3 100644 --- a/docs/30-components/button-link.mdx +++ b/docs/30-components/button-link.mdx @@ -23,8 +23,7 @@ Ein Button, der wie ein Link aussieht und sich wie ein Link verhält: ## Barrierefreiheit @@ -66,7 +65,7 @@ Die ButtonLink-Komponente eignet sich für Fälle, in denen der semantische Aufb ### Playground - + ### Funktionalitäten (mit Code) @@ -77,8 +76,7 @@ Ein einfacher ButtonLink mit grundlegenden Eigenschaften: #### Mit Icons @@ -88,8 +86,7 @@ ButtonLink mit Icons vor und/oder nach dem Label: #### Mit verstecktem Label @@ -99,8 +96,7 @@ Das Label wird versteckt und nur als Tooltip angezeigt: #### Deaktiviert @@ -110,8 +106,7 @@ Ein deaktivierter ButtonLink reagiert nicht auf Interaktionen: #### Mit Tastaturkürzel @@ -121,8 +116,7 @@ Ein visueller Hinweis auf ein verfügbares Tastaturkürzel: #### ARIA-Attribute @@ -136,8 +130,7 @@ ButtonLink mit ARIA-Attributen für erweiterte Semantik: _ariaControls: 'menu-content', }} visibleProperties={['_ariaControls', '_ariaExpanded', '_ariaSelected']} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> ### Events diff --git a/docs/30-components/button.mdx b/docs/30-components/button.mdx index c420717d92..51a6e03f24 100644 --- a/docs/30-components/button.mdx +++ b/docs/30-components/button.mdx @@ -25,8 +25,7 @@ Darstellung der Komponente mit Standard-Label und ohne optional gesetzte Felder. ## Barrierefreiheit @@ -141,7 +140,7 @@ Darstellung der Komponente mit Standard-Label und ohne optional gesetzte Felder. ### Playground - + ### Funktionalitäten (mit Code) @@ -152,8 +151,7 @@ Die sichtbare Beschriftung wird über `_label` gesetzt: #### Varianten @@ -163,8 +161,7 @@ Die Darstellung wird über `_variant` gesteuert. Die Themes steuern welche Varia **Verfügbare Varianten im Default Theme:** @@ -182,8 +179,7 @@ Icons können über `_icons` hinzugefügt werden. Als String übergeben Sie die Icons können auch als Objekt mit den Positionen `top`, `right`, `bottom` und `left` angegeben werden, jeweils mit Icon-Klasse oder Styleobjekt. @@ -195,8 +191,7 @@ Mit `_hideLabel` wird nur das Icon angezeigt, die Beschriftung wird als Tooltip **Hinweis:** Das Attribut `_label` muss auch gesetzt werden, wenn nur ein Icon angezeigt wird – es wird für Screenreader und den Tooltip verwendet. @@ -208,8 +203,7 @@ Der HTML-Button-Type wird über `_type` gesteuert: **Verfügbare Typen:** @@ -224,8 +218,7 @@ Mit `_disabled` wird der Button deaktiviert: #### Weitere Eigenschaften diff --git a/docs/30-components/card.mdx b/docs/30-components/card.mdx index a62643e1e2..e9feb0a408 100644 --- a/docs/30-components/card.mdx +++ b/docs/30-components/card.mdx @@ -24,8 +24,7 @@ Darstellung einer einfachen Card mit Titel und Inhaltsbereich. Code kann eingebl ## Barrierefreiheit @@ -64,7 +63,7 @@ Darstellung einer einfachen Card mit Titel und Inhaltsbereich. Code kann eingebl ### Playground - + ### Funktionalitäten (mit Code) @@ -75,7 +74,6 @@ Die sichtbare Überschrift wird über `_label` gesetzt. Der Inhaltsbereich wird #### Überschriftenstruktur @@ -85,7 +83,6 @@ Die Überschriftenebene wird über `_level` gesteuert. Möglich sind die Level 0 #### Schließ-Funktion @@ -95,7 +92,6 @@ Das Attribut `_has-closer` ermöglicht dem Nutzer, die Card zu schließen und da #### Events diff --git a/docs/30-components/combobox.mdx b/docs/30-components/combobox.mdx index 270ba349fd..ffc28b6085 100644 --- a/docs/30-components/combobox.mdx +++ b/docs/30-components/combobox.mdx @@ -26,8 +26,7 @@ Standard-Combobox mit Vorschlagsliste: ## Barrierefreiheit @@ -175,7 +174,6 @@ Testen Sie die verschiedenen Eigenschaften der Combobox-Komponente: '_hideLabel', '_hideMsg', ]} - codeCollapsable /> ### Funktionalitäten (mit Code) @@ -184,7 +182,7 @@ Testen Sie die verschiedenen Eigenschaften der Combobox-Komponente: Die sichtbare Beschriftung wird über `_label` gesetzt. - + #### Platzhalter und Hint-Text @@ -196,15 +194,14 @@ Der Platzhalter wird angezeigt, wenn das Feld leer ist. Der Hint-Text gibt zusä _placeholder: 'Bitte wählen oder eingeben...', _hint: 'Wählen Sie aus der Liste oder geben Sie eine Alternative ein.', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Formularattribute Standard-Attribute für Formulare wie `_disabled`, `_required` und `_touched`: - + #### Fehlermeldungen @@ -213,8 +210,7 @@ Validierungsfehler werden über `_msg` dargestellt: #### Icons @@ -224,8 +220,7 @@ Icons können links oder rechts über `_icons` hinzugefügt werden: #### Clear-Button @@ -235,15 +230,14 @@ Der Clear-Button kann über `_hasClearButton` gesteuert werden (standardmäßig #### Versteckte Beschriftung Die Beschriftung kann über `_hideLabel` visuell verborgen werden (bleibt für Screenreader sichtbar): - + ### Events diff --git a/docs/30-components/details.mdx b/docs/30-components/details.mdx index 038dc0fae7..99f5e2a9fb 100644 --- a/docs/30-components/details.mdx +++ b/docs/30-components/details.mdx @@ -24,8 +24,7 @@ Darstellung der Komponente mit Beispieltext: ## Barrierefreiheit @@ -70,9 +69,7 @@ Darstellung der Komponente mit Beispieltext: ### Playground - + ### Funktionalitäten (mit Code) @@ -83,7 +80,6 @@ Das Label wird über `_label` definiert, der Inhaltsbereich wird über den Slot #### Offener Zustand @@ -93,7 +89,6 @@ Mit `_open` wird die Komponente initial geöffnet angezeigt. Im deaktivierten Zu #### Überschriftenstruktur @@ -103,7 +98,6 @@ Die Überschriftenebene wird über `_level` (0–6) gesteuert. Wert `0` zeigt de #### Event-Anbindung diff --git a/docs/30-components/dialog.mdx b/docs/30-components/dialog.mdx index 9fa63a565f..db749ec0d0 100644 --- a/docs/30-components/dialog.mdx +++ b/docs/30-components/dialog.mdx @@ -23,8 +23,7 @@ Standard-Dialog mit Beschriftung und Inhalt: ## Barrierefreiheit @@ -90,7 +89,6 @@ Testen Sie die verschiedenen Eigenschaften des Dialogs: ### Funktionalitäten (mit Code) @@ -105,8 +103,7 @@ Die Beschriftung wird über `_label` gesetzt. Der Inhalt wird über den Slot ber _label: 'Dialog Titel', _slot: '

Dies ist der Dialoginhalt.

', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Varianten @@ -119,8 +116,7 @@ Der Dialog unterstützt zwei Varianten: _label: 'Dialog mit Card-Variante', _variant: 'card', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbare Varianten:** @@ -137,8 +133,7 @@ Die Breite des Dialogs wird über `_width` gesteuert: _label: 'Dialog mit Custom-Breite', _width: '500px', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Hinweis:** Die maximale Breite ist auf 100% begrenzt. diff --git a/docs/30-components/drawer.mdx b/docs/30-components/drawer.mdx index 92ac246c41..6460ed19c1 100644 --- a/docs/30-components/drawer.mdx +++ b/docs/30-components/drawer.mdx @@ -23,8 +23,7 @@ Standard-Drawer mit Label und Inhalt: ## Barrierefreiheit @@ -73,7 +72,7 @@ Standard-Drawer mit Label und Inhalt: ### Playground - + ### Funktionalitäten (mit Code) @@ -84,7 +83,6 @@ Der Drawer zeigt einen definierten Inhaltsbereich über den Slot an: #### Ausrichtung @@ -94,7 +92,6 @@ Die Position des Drawers wird über das **`_align`**-Attribut gesteuert: #### Schließ-Button @@ -104,7 +101,6 @@ Aktivieren Sie **`_hasCloser`**, um einen visuellen Schließ-Button anzuzeigen: #### Programmgesteuerte Kontrolle diff --git a/docs/30-components/form.mdx b/docs/30-components/form.mdx index 14f1b9cf9f..76ff146957 100644 --- a/docs/30-components/form.mdx +++ b/docs/30-components/form.mdx @@ -24,8 +24,7 @@ Standard-Formular mit Eingabefeldern und Buttons: ## Barrierefreiheit @@ -69,7 +68,7 @@ Die **Form**-Komponente unterstützt barrierefreie Formularstrukturen nach moder Testen Sie die Form mit verschiedenen Konfigurationen: - + ### Funktionalitäten (mit Code) @@ -80,7 +79,6 @@ Der Text für Pflichtfeld-Hinweise wird über `_requiredText` gesteuert: Mit `_requiredText="false"` wird der Hinweis ausgeblendet. Mit einem benutzerdefinierten String kann der Standard-Text überschrieben werden: @@ -88,7 +86,6 @@ Mit `_requiredText="false"` wird der Hinweis ausgeblendet. Mit einem benutzerdef #### Event-Anbindung diff --git a/docs/30-components/heading.mdx b/docs/30-components/heading.mdx index 459a52f671..e37bc8ba8a 100644 --- a/docs/30-components/heading.mdx +++ b/docs/30-components/heading.mdx @@ -22,7 +22,6 @@ import BetaDocsBanner from '@site/src/components/BetaDocsBanner'; Darstellung einer Überschrift der Ebene 1 ohne optional gesetzte Felder. Code kann eingeblendet werden. @@ -63,9 +62,7 @@ Darstellung einer Überschrift der Ebene 1 ohne optional gesetzte Felder. Code k ### Playground - + ### Funktionalitäten @@ -76,8 +73,7 @@ Darstellung einer Überschrift der Ebene 1 ohne optional gesetzte Felder. Code k #### Mit sekundärer Überschrift @@ -87,8 +83,7 @@ Eine Hauptüberschrift kann mit einer sekundären Überschrift kombiniert werden #### Heading ohne semantisches Level @@ -98,8 +93,7 @@ Mit `_level="0"` wird die Komponente ohne semantisches Heading-Element dargestel ## API diff --git a/docs/30-components/icon.mdx b/docs/30-components/icon.mdx index 2428856aa4..29e0b5d9eb 100644 --- a/docs/30-components/icon.mdx +++ b/docs/30-components/icon.mdx @@ -22,8 +22,7 @@ Darstellung eines Icons mit beschreibendem Label: ## Barrierefreiheit @@ -65,7 +64,7 @@ Icons erfordern eine barrierefreie Beschreibung für Nutzer:innen mit Seheinschr Testen Sie die verschiedenen Icon-Eigenschaften: - + ### Funktionalitäten (mit Code) @@ -76,7 +75,6 @@ Das Icon wird über die Property `_icons` mit Klassenamen definiert. Das Label w #### Verfügbare Icon-Fonts diff --git a/docs/30-components/image.mdx b/docs/30-components/image.mdx index 49f698d254..2e3cabe57a 100644 --- a/docs/30-components/image.mdx +++ b/docs/30-components/image.mdx @@ -21,8 +21,7 @@ Grunddarstellung eines Bildes mit erforderlichem Alternativtext: ## Barrierefreiheit @@ -72,7 +71,7 @@ Ja, alle gängigen Formate werden unterstützt (PNG, JPEG, WebP, SVG, GIF usw.). ### Playground - + ### Funktionalitäten (mit Code) @@ -83,7 +82,6 @@ Die Bildquelle wird über das erforderliche Attribut `_src` gesetzt. Dies ist di #### Alternativtext @@ -93,7 +91,6 @@ Das erforderliche Attribut `_alt` bietet eine Textbeschreibung oder Alternative #### Responsive Bilder mit Srcset und Sizes @@ -107,7 +104,6 @@ Achtung: der Browser wechselt das Bild nur von kleiner zu größer und nicht wie _srcset: '/assets/image-small.png 600w, /assets/image-large.png 1200w', _sizes: '(min-width: 600px) 600px, (min-width: 1200px) 1200px', }} - codeCollapsable /> #### Ladeverhalten @@ -117,7 +113,6 @@ Das Attribut `_loading` steuert, wann das Bild vom Browser geladen wird. `lazy` **Verfügbare Werte:** diff --git a/docs/30-components/input-checkbox.mdx b/docs/30-components/input-checkbox.mdx index 8463b037ae..dbd3c76a94 100644 --- a/docs/30-components/input-checkbox.mdx +++ b/docs/30-components/input-checkbox.mdx @@ -26,8 +26,7 @@ Darstellung der Komponente ohne optional gesetzte Felder. Code kann eingeblendet ## Barrierefreiheit @@ -102,7 +101,6 @@ Testen Sie die verschiedenen Eigenschaften der InputCheckbox-Komponente: ### Funktionalitäten (mit Code) @@ -114,8 +112,7 @@ Eine einfache Checkbox ohne spezielle Konfiguration: #### Varianten @@ -125,8 +122,7 @@ Die Checkbox unterstützt drei verschiedene visuelle Varianten über das Attribu **Verfügbare Varianten:** @@ -141,8 +137,7 @@ Verschiedene Zustände und Statusanzeigen: **Verfügbare Zustände:** @@ -158,8 +153,7 @@ Kontrolle über Sichtbarkeit und Ausrichtung der Beschriftung: **Verfügbare Optionen:** @@ -173,8 +167,7 @@ Standard-Attribute für die Integration in Formulare: **Verfügbare Attribute:** @@ -191,8 +184,7 @@ Anpassung der Icon-Darstellung für verschiedene Zustände: Die `_icons`-Eigenschaft ermöglicht die Anpassung der Icons für die Zustände `checked`, `unchecked` und `indeterminate`. diff --git a/docs/30-components/input-color.mdx b/docs/30-components/input-color.mdx index a97f06e7c7..920aa573cc 100644 --- a/docs/30-components/input-color.mdx +++ b/docs/30-components/input-color.mdx @@ -22,8 +22,7 @@ Einfaches Farbwahlfeld mit Beschriftung und Standard-Farbe: ## Barrierefreiheit @@ -86,7 +85,7 @@ Nein, Sie können sie über `_required` optional oder erforderlich machen. Die E Testen Sie die verschiedenen Eigenschaften der InputColor-Komponente: - + ### Funktionalitäten (mit Code) @@ -97,8 +96,7 @@ Die Komponente mit Beschriftung, wahlweise mit Tooltip-Stil: #### Mit voreingestelltem Wert @@ -108,8 +106,7 @@ Farbfeld mit einer Standard-Farbe: #### Mit Hinweis und Icons @@ -123,8 +120,7 @@ Farbfeld mit zusätzlichem Hinweistext und grafischen Symbolen: _hint: 'Wählen Sie eine Farbe für Ihr Design', _icons: { left: 'fa-solid fa-palette' }, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Deaktiviert und Nur-Lesen @@ -134,8 +130,7 @@ Deaktiviertes Eingabefeld (nicht fokussierbar und nicht veränderbar): #### Mit Fehlermeldung @@ -148,8 +143,7 @@ Farbfeld mit Validierungsmeldung: _label: 'Farbe auswählen', _msg: 'Bitte wählen Sie eine gültige Farbe aus.', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Events diff --git a/docs/30-components/input-date.mdx b/docs/30-components/input-date.mdx index eb800d6b15..3f3617715a 100644 --- a/docs/30-components/input-date.mdx +++ b/docs/30-components/input-date.mdx @@ -28,8 +28,7 @@ Standard-Datumsfeld mit dem Typ `date`. Die Eingabe erfolgt über direkte Zahlen ## Barrierefreiheit @@ -100,7 +99,7 @@ Die Komponente nutzt die nativen HTML5-Eingabetypen des Browsers. Darstellung un ### Playground - + ### Funktionalitäten (mit Code) @@ -111,7 +110,6 @@ Das Eingabefeld wird mit einer Beschriftung über `_label` versehen. Zusätzlich #### Eingabetypen @@ -121,7 +119,6 @@ Das Attribut `_type` bestimmt das Format und den Auswahldialog: **Verfügbare Typen:** @@ -142,7 +139,6 @@ Die Attribute `_min` und `_max` definieren den gültigen Datumsbereich. Sie grei _min: '2025-01-01', _max: '2025-12-31', }} - codeCollapsable /> #### Schrittgröße bei Zeiteingabe @@ -156,7 +152,6 @@ Für Typ `time` kann die Schrittgröße über `_step` festgelegt werden: _type: 'time', _step: '15', }} - codeCollapsable /> #### Formularattribute @@ -166,7 +161,6 @@ Standard-Formularattribute für Validierung und Interaktion: **Verfügbare Attribute:** @@ -185,7 +179,6 @@ Validierungsfehler oder Hinweismeldungen werden über das Attribut `_msg` ausgeg _label: 'Datum', _msg: 'Das eingegebene Datum liegt außerhalb des zulässigen Bereichs.', }} - codeCollapsable /> #### Events diff --git a/docs/30-components/input-email.mdx b/docs/30-components/input-email.mdx index 0757e4a18b..b408c1de9c 100644 --- a/docs/30-components/input-email.mdx +++ b/docs/30-components/input-email.mdx @@ -25,8 +25,7 @@ Darstellung der Komponente ohne optional gesetzte Felder. ## Barrierefreiheit @@ -107,7 +106,7 @@ Ja. Nutzen Sie `_pattern`, wenn zusätzlich zur nativen E-Mail-Validierung weite Testen Sie die verschiedenen Eigenschaften des InputEmail-Felds: - + ### Funktionalitäten (mit Code) @@ -118,8 +117,7 @@ Standard-E-Mail-Eingabe mit Label: #### Mehrfach-Eingabe @@ -129,8 +127,7 @@ Mit `_multiple` werden mehrere E-Mail-Adressen akzeptiert, kommagetrennt: #### Placeholder und Hinweis @@ -140,8 +137,7 @@ Hilfstexte für bessere Usability: #### Formularattribute @@ -151,8 +147,7 @@ Standard-Attribute für Formulare: **Verfügbare Attribute:** @@ -174,8 +169,7 @@ Icons können links und/oder rechts vom Eingabefeld angezeigt werden: _label: 'E-Mail-Adresse', _icons: { left: 'kolibri', right: 'fa-solid fa-envelope' }, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Name und ID @@ -185,8 +179,7 @@ Technische Kennzeichnung für Formulare: **Hinweis**: `_name` wird als HTML-Attribut `name` verwendet und ist wichtig für das Absenden des Formulars. @@ -200,8 +193,7 @@ Mit `_suggestions` können Sie eine Liste von Vorschlagswerten bereitstellen, di #### Zeichenbegrenzung und Zeichenzähler @@ -215,8 +207,7 @@ Mit den Attributen `_max-length`, `_max-length-behavior` und `_has-counter` läs _maxLength: 100, }} visibleProperties={['_hasCounter', '_maxLength', '_maxLengthBehavior']} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> ##### Attribute @@ -254,8 +245,7 @@ Fehlerhafte Eingaben können über `_msg` mit aussagekräftigen Meldungen verseh _msg: { _description: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.' }, _touched: true, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> ### Events diff --git a/docs/30-components/input-file.mdx b/docs/30-components/input-file.mdx index 41f9f4b773..26e9252a47 100644 --- a/docs/30-components/input-file.mdx +++ b/docs/30-components/input-file.mdx @@ -25,8 +25,7 @@ Einfaches Datei-Eingabefeld mit Beschriftung und Konfigurationsmöglichkeiten: ## Barrierefreiheit @@ -108,7 +107,7 @@ Ja. Dateien können zusätzlich zum nativen Dateiauswahldialog per Drag & Drop a Testen Sie die verschiedenen Eigenschaften der InputFile-Komponente: - + ### Funktionalitäten (mit Code) @@ -119,8 +118,7 @@ Standard-Datei-Eingabefeld ohne Konfiguration: #### Dateitypbeschränkung @@ -130,8 +128,7 @@ Beschränkung der erlaubten Dateitypen über das Attribut `_accept`: **Beispiele für `_accept`-Werte:** @@ -148,8 +145,7 @@ Ermöglichen Sie die Auswahl mehrerer Dateien gleichzeitig: #### Deaktivierter Zustand @@ -159,8 +155,7 @@ Das Eingabefeld ist nicht interaktiv: #### Fehlermeldung @@ -173,8 +168,7 @@ Fehler oder Validierungshinweise: _label: 'Datei auswählen', _msg: { _description: 'Nur PDF-Dateien bis 5 MB erlaubt' }, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Hilfetexte und Beschriftung @@ -187,8 +181,7 @@ Additionale Informationen für Nutzer: _label: 'Dokument hochladen', _hint: 'Akzeptierte Formate: PDF, DOC, DOCX. Max. Größe: 10 MB.', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> ### Events diff --git a/docs/30-components/input-number.mdx b/docs/30-components/input-number.mdx index 399590efa0..f89e9e4310 100644 --- a/docs/30-components/input-number.mdx +++ b/docs/30-components/input-number.mdx @@ -27,8 +27,7 @@ Standard-Eingabefeld für numerische Werte ohne optional gesetzte Felder: ## Barrierefreiheit @@ -107,7 +106,7 @@ Ja. Die Erhöhen-/Verringern-Schaltflächen können über ein Theme-seitiges Fea Testen Sie die verschiedenen Eigenschaften des InputNumber-Feldes: - + ### Funktionalitäten (mit Code) @@ -117,8 +116,7 @@ Minimum-Konfiguration mit Label: #### Formularattribute @@ -128,8 +126,7 @@ Standard-Attribute für Formulare wie Deaktivierung, Read-Only-Modus und Pflicht **Verfügbare Attribute:** @@ -147,8 +144,7 @@ Unterstützung für Hinweistexte und Validierungsmeldungen: _label: 'Preis', _hint: 'Bitte geben Sie einen Wert in EUR an', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbare Attribute:** @@ -167,8 +163,7 @@ Konfigurieren Sie Minimal-, Maximalwerte und Schrittweite. `_min` und `_max` gre _max: 100, _step: 5, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbare Attribute:** @@ -187,8 +182,7 @@ Nutzen Sie Placeholder zur Eingabeformatierung und `_hideLabel`, um das Label vi _placeholder: 'z.B. 25', _hideLabel: false, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbare Attribute:** @@ -207,8 +201,7 @@ Definieren Sie linke und/oder rechte Icons für zusätzlichen Kontext: left: 'kolicon-euro', }, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbare Positionen:** @@ -222,8 +215,7 @@ Ein Button mit beliebiger Aktion kann im Feld platziert werden (nur mit `_hideLa #### Vorschlagswerte (Suggestions) @@ -236,8 +228,7 @@ Ein Button mit beliebiger Aktion kann im Feld platziert werden (nur mit `_hideLa _label: 'Anzahl', _suggestions: [1, 5, 10, 25, 50, 100], }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbare Attribute:** diff --git a/docs/30-components/input-password.mdx b/docs/30-components/input-password.mdx index 588f391ed5..f43cd1b9ec 100644 --- a/docs/30-components/input-password.mdx +++ b/docs/30-components/input-password.mdx @@ -25,8 +25,7 @@ Standard-Passwortfeld mit Beschriftung und optional aktivierter Sichtbarkeitsfun ## Barrierefreiheit @@ -111,7 +110,6 @@ Testen Sie die verschiedenen Eigenschaften des Passwortfelds: ### Funktionalitäten (mit Code) @@ -123,8 +121,7 @@ Standard-Passwortfeld mit Beschriftung: #### Sichtbarkeitsfunktion (Auge-Icon) @@ -134,8 +131,7 @@ Passwortfeld mit Toggle zum Anzeigen/Verbergen des Passworts: #### Formular-Attribute @@ -145,8 +141,7 @@ Standardattribute für Formulare (Pflichtfeld, deaktiviert, read-only, etc.): #### Hinweise und Fehlermeldungen @@ -156,8 +151,7 @@ Hilfetext und Validierungsmeldungen: #### Zeichenzähler und Längenbegrenzung @@ -167,8 +161,7 @@ Passwortfeld mit Zeichenzähler und Längenbegrenzung (hart oder weich): #### Events und Eingabeverarbeitung diff --git a/docs/30-components/input-radio.mdx b/docs/30-components/input-radio.mdx index c93209e3d7..9c45a8eca1 100644 --- a/docs/30-components/input-radio.mdx +++ b/docs/30-components/input-radio.mdx @@ -29,7 +29,6 @@ Darstellung einer einfachen Radio-Auswahlgruppe mit drei Optionen: { label: 'Firma', value: 'company' }, ], }} - codeCollapsable /> ## Barrierefreiheit @@ -95,7 +94,6 @@ Testen Sie die verschiedenen Eigenschaften der InputRadio-Komponente: { label: 'Firma', value: 'company' }, ], }} - codeCollapsable /> ### Funktionalitäten (mit Code) @@ -114,8 +112,7 @@ Die Auswahloptionen werden über `_options` als Array von Objekten mit `label` u { label: 'Divers', value: 'diverse' }, ], }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Orientierung @@ -133,8 +130,7 @@ Die Ausrichtung der Radio-Elemente kann horizontal oder vertikal erfolgen: ], _orientation: 'horizontal', }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Hinweistexte und Formularattribute @@ -152,8 +148,7 @@ Hinweistexte und Validierungsfeedback können über `_hint` und `_msg` bereitges { label: 'Economy (5–10 Tage)', value: 'economy' }, ], }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Events diff --git a/docs/30-components/input-range.mdx b/docs/30-components/input-range.mdx index 325b5c9227..d95ade628f 100644 --- a/docs/30-components/input-range.mdx +++ b/docs/30-components/input-range.mdx @@ -22,8 +22,7 @@ Darstellung einer InputRange-Komponente mit Standardausstattung: ## Barrierefreiheit @@ -79,7 +78,7 @@ Darstellung einer InputRange-Komponente mit Standardausstattung: Testen Sie die verschiedenen Eigenschaften der InputRange-Komponente: - + ### Funktionalitäten (mit Code) @@ -90,8 +89,7 @@ Standard-InputRange mit Beschriftung, Minimum und Maximum: #### Wertbereich und Schrittweite @@ -101,8 +99,7 @@ Die Eigenschaften `_min`, `_max` und `_step` bestimmen den Wertebereich und die #### Hinweistexte @@ -112,8 +109,7 @@ Zusätzliche Informationen können über `_hint` bereitgestellt werden: #### Deaktivierter Zustand @@ -123,8 +119,7 @@ Ein deaktiviertes Eingabefeld kann über das Attribut `_disabled` erreicht werde #### Fehlermeldungen @@ -138,8 +133,7 @@ Das Attribut `_msg` erlaubt die Anzeige von Validierungshinweisen: _msg: { _description: 'Der Wert muss zwischen 10 und 90 liegen', _level: 'error' }, _value: 5, }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> #### Events diff --git a/docs/30-components/input-text.mdx b/docs/30-components/input-text.mdx index 8c553c92a3..62129ea80d 100644 --- a/docs/30-components/input-text.mdx +++ b/docs/30-components/input-text.mdx @@ -26,7 +26,6 @@ Standard-Eingabefeld mit Beschriftung: ## Barrierefreiheit @@ -111,7 +110,6 @@ Testen Sie die verschiedenen Eigenschaften des Eingabefelds ### Funktionalitäten (mit Code) @@ -123,8 +121,7 @@ Ein einfaches Eingabefeld mit Label: #### Eingabefeld-Typen @@ -134,8 +131,7 @@ InputText unterstützt verschiedene Eingabe-Typen über das Attribut `_type`: **Verfügbare Typen:** @@ -151,8 +147,7 @@ Links und rechts vom Eingabefeld können Icons platziert werden: #### Validierungszustände @@ -162,8 +157,7 @@ Status-Eigenschaften zur Steuerung von Validierung und Interaktion: **Verfügbare Zustände:** @@ -179,8 +173,7 @@ Label können visuell verborgen sein, bleiben aber für assistive Technologien s #### Vorschlagswerte (Suggestions) @@ -193,8 +186,7 @@ Label können visuell verborgen sein, bleiben aber für assistive Technologien s _label: 'Anrede', _suggestions: ['Herr', 'Frau', 'Firma'], }} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Verfügbares Attribut:** @@ -208,8 +200,7 @@ Mit den Attributen `_max-length`, `_max-length-behavior` und `_has-counter` läs ##### Attribute @@ -250,8 +241,7 @@ Ein Schaltfläche mit beliebiger Aktion kann im Feld platziert werden (nur mit ` #### Hinweistexte und Fehlermeldungen @@ -261,8 +251,7 @@ Zusätzliche Informationen und Fehler-Feedback: #### Events diff --git a/docs/30-components/link-button.mdx b/docs/30-components/link-button.mdx index 36df92ac4a..ff94daeb7d 100644 --- a/docs/30-components/link-button.mdx +++ b/docs/30-components/link-button.mdx @@ -19,7 +19,7 @@ import LinkButtonPreview from '@site/src/components/previews/components/LinkButt Darstellung der Komponente ohne optional gesetzte Felder: - + ## Barrierefreiheit @@ -99,7 +99,6 @@ LinkButton ist semantisch ein Link mit Button-Styling. **Verfügbare Attribute:** @@ -106,8 +103,7 @@ Der PopoverButton unterstützt verschiedene visuelle Varianten: **Verfügbare Attribute:** @@ -123,8 +119,7 @@ Die Position des Popovers relativ zum Button kann gesteuert werden: **Verfügbare Positionen:** @@ -143,8 +138,7 @@ Das Popover-Inhalt wird über den Standard-Slot bereitgestellt: _slot: "
  • Option 1
  • Option 2
  • Option 3
" }} visibleProperties={['_slot']} - codeCollapsable - codeCollapsed + sourceCodeDetailsCollapsed /> **Hinweis**: Der Slot-Inhalt wird mit HTML-Sanitierung verarbeitet für Sicherheit. Der Inhalt sollte prägnant und fokussiert bleiben. @@ -156,8 +150,7 @@ Der PopoverButton unterstützt Accessibility-Features für erweiterte Tastaturin **Verfügbare Attribute:** diff --git a/docs/30-components/progress.mdx b/docs/30-components/progress.mdx index 129f37b095..9cbc7931a7 100644 --- a/docs/30-components/progress.mdx +++ b/docs/30-components/progress.mdx @@ -24,8 +24,7 @@ Darstellung der Komponente mit horizontalem Fortschrittsbalken und Beschriftung. ## Barrierefreiheit @@ -77,7 +76,7 @@ Ja, die Progress-Komponente verarbeitet auch Dezimalzahlen, beispielsweise `_val ### Playground - + ### Funktionalitäten (mit Code) @@ -88,8 +87,7 @@ Der horizontale Balken ist die Standard-Variante und eignet sich für die Darste #### Zirkulärer Fortschrittsbalken @@ -99,8 +97,7 @@ Die zirkuläre Variante ist kompakt und eignet sich für kleine Bereiche oder al #### Beschriftung und Unit @@ -110,8 +107,7 @@ Mit `_label` können Sie den Fortschritt beschreiben, `_unit` kann intern zur Be #### Aufgabenverfolgung @@ -121,8 +117,7 @@ Anwendungsbeispiel: Verfolgung von abgeschlossenen Aufgaben aus einer Liste. ## API diff --git a/docs/30-components/quote.mdx b/docs/30-components/quote.mdx index 26915f588a..46d86e95a9 100644 --- a/docs/30-components/quote.mdx +++ b/docs/30-components/quote.mdx @@ -24,8 +24,7 @@ Darstellung der Standard-Block-Variante mit Zitat und Quellenangabe: ## Barrierefreiheit @@ -77,7 +76,7 @@ Das `_quote`-Attribut erwartet reinen Text. Formatierungen sollten über CSS ode Testen Sie die verschiedenen Eigenschaften der Quote-Komponente: - + ### Funktionalitäten (mit Code) @@ -88,8 +87,7 @@ Die Quote-Komponente bietet zwei Darstellungsvarianten: **Verfügbare Varianten:** @@ -103,8 +101,7 @@ Der optionale Label kann als Autor- oder Werkangabe dienen, während `_href` die ## API diff --git a/docs/30-components/select.mdx b/docs/30-components/select.mdx index eda74aab70..2fa4ae120d 100644 --- a/docs/30-components/select.mdx +++ b/docs/30-components/select.mdx @@ -25,8 +25,7 @@ Standard-Auswahlliste mit Pflichtfeld-Markierung: ## Barrierefreiheit @@ -138,7 +137,7 @@ Das native HTML-Element `