# Europa Component Library-Designsystem ## Vorschau der Europa Component Library-Designsystem-Oberfläche Einzelne Notizen öffnen, alle Abschnitte ein- oder ausklappen und die vollständige Leseansicht ansehen. ## Designreferenz zum Designsystem Europa Component Library Stylesheet von @ecl/preset-ec 4.11.2 und Accordion-Quellcode geprüft. Natives Verhalten und die ursprüngliche Zusammensetzung der Steuerelemente zum Öffnen aller Bereiche sind ausdrücklich voneinander unterschieden. ### EC-Farbpalette und Statusrollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --ecl-color-primary | #3860ed | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-primary-140 | #0f2fa2 | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-secondary | #ffbe5c | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-dark | #26324b | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-info | #3860ed | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-success | #24a148 | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-error | #da1e28 | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-warning | #f39811 | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-background | #fcfcfc | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-branding | #004494 | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-neutral-20 | #f8f9fd | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-neutral-60 | #e0e5f5 | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | | --ecl-color-white | #fff | Veröffentlichte Werte des EC-Presets. Das Branding-Blau unterscheidet sich von der primären Aktionsfarbe; Statusfarben ersetzen keine schriftlichen Mitteilungen. | ### Abstandsskala | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --ecl-spacing-2xs | 0.25rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-xs | 0.5rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-s | 0.75rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-m | 1rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-l | 1.25rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-xl | 1.5rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-2xl | 2rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-3xl | 2.5rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-4xl | 3rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-5xl | 3.5rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | | --ecl-spacing-6xl | 4rem | Tatsächlicher rem-basierter Maßstab im festgelegten Preset. Individuelle Kompositionen verwenden diese Rollen, ohne einen anderen institutionellen Maßstab zu erfinden. | ### Typografie und Lesebreite | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --ecl-font-family-default | arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-xs | normal normal 400 0.75rem/1.125rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-s | normal normal 400 0.875rem/1.125rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-m | normal normal 400 1rem/1.5rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-l | normal normal 400 1.25rem/1.75rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-xl | normal normal 400 1.5rem/2.25rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-2xl | normal normal 400 1.75rem/2.25rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-3xl | normal normal 400 2.5rem/2.75rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-font-4xl | normal normal 400 3.25rem/3.375rem arial,sans-serif | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | | --ecl-max-width | 80ch | Vollständige Kurzschreibweisen enthalten Schriftschnitt, Schriftgröße, Zeilenhöhe und Fallback. Für die EC-Bildschirmfamilie wird hier Arial verwendet; eine benutzerdefinierte Webschrift ist nicht erforderlich. | ### Spezifikation des nativen Akkordeons | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | Initialization | data-ecl-auto-init="Accordion" + ECL.autoInit() | Initialisiert diese Komponente innerhalb des Presets; ein Framework-Wrapper ist nicht erforderlich. | | Trigger | data-ecl-accordion-toggle | Der native Event-Listener ist an jeder Überschriften-Schaltfläche angebunden. | | Target | aria-controls matches a panel ID | Fehlende Ziele verursachen einen Fehler; jede ID muss eindeutig bleiben. | | Open state | aria-expanded + panel.hidden | Die Laufzeitumgebung ändert sowohl die Semantik als auch die sichtbaren Inhalte. | | Event | root.ECLAccordion.on("onToggle", callback) | Das Beispiel ermittelt die Anzahl geöffneter Abschnitte nach einem nativen Umschalten. | | Event payload | { item, isOpening } | Das Element ist das Zielpanel, kein Array-Index und kein ausgewählter Tab. | | Independent panels | Several may be open together | „Alle öffnen“ ist ein ursprüngliches Anwendungsverhalten, das native Auslöseschaltflächen aktiviert. | ## Europa Component Library Design-System: vollständiger Leitfaden Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Auswahl von Preset und Version für Europa EC im Designsystem Europa Component Library ### Wähle vor dem Importieren von Assets EC oder EU aus > Europa stellt separate institutionelle Presets bereit. Dieses Beispiel verwendet bewusst @ecl/preset-ec in Version 4.11.2, passend zur verlinkten Dokumentation der Europäischen Kommission. Es kombiniert weder EU-Markup mit historischen Screenshots der Europäischen Kommission noch mit einem Stylesheet ohne festgelegte Version. Das Paket enthält dist/styles/ecl-ec.css und dist/scripts/ecl-ec.js, sodass sich das statische Beispiel ohne zusätzliches Frontend-Framework bereitstellen lässt. - Verwende die EC-Voreinstellung für die hier gezeigte EC-Implementierung. - Behalte CSS und JavaScript in derselben Version. - Quell-IDs müssen eindeutig bleiben, wenn Akkordeonelemente wiederverwendet werden. ### Betrachte dies als versionierte Implementierung Die Referenz beschreibt Version 4.11.2 und behauptet nicht, dass alle späteren Releases identische Tokens oder dasselbe Verhalten aufweisen. Bei Aktualisierungen sollten das gewählte Preset, das Komponenten-Markup und die Initialisierung gemeinsam überprüft werden. Ein neuer Paketname oder eine neue Versionsnummer allein beweist nicht, dass ein zuvor kopiertes Muster weiterhin korrekt funktioniert. ## Europa Component Library-Designsystem: Europa-Farbrollen und institutionelle Identität ### Branding und primäre Aktion getrennt halten Die Branding-Farbe des Presets ist #004494, die Primärfarbe hingegen #3860ed. Im ursprünglichen Briefing wird die Branding-Farbe nur als schmale obere Linie verwendet; für die primäre Aktion nutzt die Komponente eine eigene Gestaltung. Neutral-20 dient als Seitenhintergrund, während Neutral-60 die Inhalte voneinander abgrenzt. So bleibt der institutionelle Akzent klar von der Farbe eines interaktiven Steuerelements getrennt. ### Dem Beispiel keine offizielle Bedeutung zuschreiben Die Seite ist eine OpenDesign-Studie mit fiktiven Beratungsnotizen. Sie enthält kein Logo der Europäischen Kommission und stellt weder einen Förderaufruf noch eine Dienstleistung oder rechtliche Anforderung dar. Einträge für Fehler-, Warn- und Erfolgspaletten sind als tatsächliche Tokens aufgeführt. Die Vorschau erzeugt jedoch keine künstliche Erfolgsmeldung für einen Antrag, nur um alle Farben anzuzeigen. ## Europa Component Library-Designsystem: Europa-Typografie und Abstandsmaßstab ### Vollständige font-Kurzschreibweisen verwenden Die EC-Voreinstellung definiert Arial als Standardschriftfamilie für Bildschirme. Die Rolle m entspricht 1rem mit einer Zeilenhöhe von 1.5rem und einer Schriftstärke von 400; größere Rollen haben jeweils eine eigene Zeilenhöhe. Die Referenz enthält vollständige Deklarationen und nicht nur einzelne Schriftgrößen. Die Schriftstärke der Überschrift in der Studie ist eine eigenständige Hervorhebungsentscheidung, die auf der bereitgestellten Rolle aufbaut; der Text der Komponenten bleibt der Kontrolle des nativen Stylesheets überlassen. ### rem-Abstände und Textbreite sichtbar halten Die Abstandsfolge umfasst 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 und 4rem. Die native maximale Lesebreite beträgt 80ch. Das ursprüngliche Layout verwendet eine zentrierte äußere Begrenzung von 1080px und responsive Innenabstände, während jedes Akkordeon die eigenen Abstände der Voreinstellung beibehält. Die äußere Breite ist eine gestalterische Entscheidung und kein neues offizielles Token. ## Europa Component Library Akkordeon-Markup und natives Verhalten im Designsystem Designsystem Europa ### Überschriften-Schaltflächen echte Panels steuern lassen Jedes .ecl-accordion__item enthält eine Überschrift mit einer Schaltfläche .ecl-accordion__toggle. Ihr aria-controls verweist auf das zugehörige .ecl-accordion__content-Panel. Das Beispiel enthält für jeden Bereich eine stabile Trigger-ID und ein aria-labelledby-Attribut. Das native Skript sucht das Ziel anhand der ID, ändert aria-expanded und passt panel.hidden an. Diese Verknüpfungen müssen auch dann korrekt bleiben, wenn Elemente neu angeordnet oder kopiert werden. ### Einen expliziten Indikator ohne externes Sprite verwenden Das Beispiel enthält einfache, eigens erstellte Plus- und Minus-SVG-Pfade innerhalb der nativen Klassen für den Toggle-Indikator. Die Voreinstellung legt fest, welcher im erweiterten Zustand angezeigt wird. Dabei handelt es sich um eigens erstellte, einfache Formen und nicht um kopierte institutionelle Logos. So bleibt das vollständige Beispiel in sich geschlossen und benötigt kein Sprite-Laden über Cross-Origin, während der Aufbau der Komponente erhalten bleibt. ## Europa Component Library Ereignisse und Verhalten zum Öffnen aller Bereiche im Akkordeon des Designsystems Designsystem Europa ### Den Zustand aus der nativen Komponente ableiten ECL.autoInit() stellt die initialisierte Komponente als root.ECLAccordion bereit. Die Anwendung lauscht auf deren onToggle-Ereignis und zählt, wie viele Trigger-Schaltflächen aktuell aria-expanded="true" haben. Die Ereignisdaten enthalten das Zielelement und isOpening, was sich für die Verarbeitung einzelner Panels eignet. Die Anzahl wird weder aus sichtbarem Text abgeleitet noch in einem zweiten, unabhängigen Array offener Zustände verwaltet. ### Die Sammelaktion vorhersehbar gestalten Wenn alle Panels geöffnet sind, schließt die Sammelaktion sie; andernfalls öffnet sie alle. Der Handler aktiviert nur die nativen Schaltflächen, deren Zustand geändert werden muss. Er setzt weder hidden noch aria-expanded selbst, sodass native Ereignisse und die daraus abgeleitete Anzahl konsistent bleiben. Die Beschriftung der Schaltfläche wechselt zwischen „Alle Bereiche öffnen“ und „Alle Bereiche schließen“ und zeigt so die nächste Aktion an. ## Europa Component Library Tastaturbedienung und progressives Lesen im Designsystem Designsystem Europa ### Die übliche Schaltflächenbedienung verwenden Mit der Tabulatortaste gelangen Sie zu einer Überschriften-Schaltfläche. Enter oder die Leertaste lösen sie gemäß dem nativen Verhalten von Browser-Schaltflächen aus. Dies ist ein Akkordeon und keine Tab-Leiste; eine Navigation zwischen Tabs mit den Pfeiltasten sollte nicht analog ergänzt werden. Mehrere Panels können geöffnet bleiben, sodass sich die Hinweise vergleichen lassen. Der Fokusindikator stammt aus dem Komponenten-Stylesheet und bleibt auf der hellen Oberfläche sichtbar. ### Text ohne JavaScript lesbar halten Die Quelle HTML zeigt anfangs alle Panels an und setzt aria-expanded="true". Nach erfolgreicher nativer Initialisierung schließt die Anwendung sie durch Aktivieren ihrer Schaltflächen. Ist JavaScript deaktiviert, bleibt der Text daher sichtbar; die inaktive Sammelwerkzeugleiste wird durch den no-JS-Stil ausgeblendet. Dieser Fallback wurde anhand der tatsächlichen Sichtbarkeit überprüft und nicht nur anhand des Vorhandenseins der Absätze im Quelltext. ## Europa Component Library Responsive Panels und lange Inhalte im Designsystem Designsystem Europa ### Natürliche Höhe und Zeilenumbrüche zulassen Das Dokument verwendet keine feste Akkordeonhöhe. Geöffnete Hinweise können sich ausdehnen und Überschriften, nummerierte Listen sowie einen hervorgehobenen Entscheidungshinweis aufnehmen. Auf kleineren Bildschirmen werden die ursprünglichen äußeren Innenabstände reduziert und für die Überschrift eine kleinere bereitgestellte Schriftrolle verwendet. Langer Triggertext wird umgebrochen, während der Indikator verfügbar bleibt. Dies wurde bei 280px sowie auf Desktop-, Tablet- und Smartphone-Bildschirmbreiten überprüft. ### Lesesteuerungen nicht in einen Genehmigungsprozess verwandeln Das Öffnen oder Schließen eines Panels ändert nur die Darstellung. Die Anzahl gibt an, wie viele Bereiche geöffnet sind, nicht wie viele abgeschlossen oder Anforderungen erfüllt wurden. Der Fußbereich weist darauf hin, dass weder eine Stellungnahme zur Konsultation noch eine formelle Genehmigung eingereicht wird. Ein echter Dienst benötigte eigene Regeln für Teilnahmeberechtigung, Speicherung und Backend-Verhalten; nichts davon wird durch die Komponentendemonstration vorausgesetzt. ## Europa Component Library Vollständige statische Einrichtung des Designsystems Designsystem Europa ### Die passende Voreinstellung installieren und alle Dateien speichern Die bereitgestellte index.html lädt vor ecl-app.js das fixierte Stylesheet der Voreinstellung und das Browser-Skript. Speichern Sie die ebenfalls bereitgestellten Dateien ecl.css und ecl-app.js daneben und stellen Sie den Ordner über HTTP bereit. Alle Inhalte, SVG-Indikatoren und Zustands-Handler sind enthalten. Für diese Studie sind weder ein verborgenes Anwendungsgerüst noch ein separater Icon-Download erforderlich. 1. Die fixierte EC-Voreinstellung installieren. 2. index.html, ecl.css und ecl-app.js zusammen speichern. 3. Das Verzeichnis bereitstellen und einzelne sowie Sammelaktionen testen. 4. Mit Tastatur, schmalem Ansichtsfenster und deaktiviertem JavaScript erneut testen. ### Komponentenaktualisierungen nachvollziehbar prüfen Prüfen Sie nach einer Aktualisierung die IDs der Trigger und Panels, die Initialisierung, den onToggle-Listener, den Zustand der Sammelaktion und die Ansicht ohne JavaScript. Vergleichen Sie anschließend tatsächliche Typografie, Farben und das Layout auf schmalen Bildschirmen. Die Paketinstallation und eine gerenderte Überschrift reichen nicht als Nachweis dafür aus, dass die vollständigen ausklappbaren Inhalte weiterhin funktionieren. ## Europa Component Library Komponentenbeispiele für das Designsystem Designsystem Europa ### ecl-index.html — vollständiger Quelltext Vollständiges Komponenten-Markup, Inhalte, Inline-Indikatoren und Pfade zu den Assets der Voreinstellung. ``` Public conversation brief

European Commission preset / original study

A clear brief for a public conversation

Explore three preparation notes with native ECL expandable sections and an explicit open-all control.

ECL EC 4.11.2 CSS and native Accordion runtime. Original OpenDesign sample text; this is not an EU service, funding programme or legal guide.

0 of 3 sections open

This fictional planning note describes a small community consultation. It is sample editorial content, not an EU funding call, legal requirement or official application process.

Make a decision possible

  1. State which decision the conversation will inform.
  2. List information already available before asking participants for more.
  3. Name what remains outside the consultation.

Give participants enough context to decide whether and how to take part. The invitation should explain the topic, expected duration, available formats and the use of any notes.

Provide usable alternatives

  1. Offer a plain-language explanation of the activity.
  2. Allow a person to contribute without speaking to the whole group.
  3. Explain how to ask for an accessible format.

After the session, distinguish what was agreed from what still needs investigation. A clean record helps the next reader understand how a proposal changed and why.

Prepare a readable follow-up

  1. Write the next action with an owner and review date.
  2. Make open questions visible alongside conclusions.
  3. Invite participants to correct an inaccurate summary.

Each heading is a native button. Use Tab to move between headings and Enter or Space to toggle; several sections can remain open. Without JavaScript the notes remain readable.

``` Code-Referenz - Speichern Sie die Datei HTML unter dem Namen index.html und ändern Sie die Namen der anderen bereitgestellten Dateien nicht. ### ecl.css — vollständiger Quelltext Eigenständige responsive Gestaltung auf Grundlage des nativen ECL-Komponentenstils. ``` *{box-sizing:border-box}body{margin:0;background:var(--ecl-color-neutral-20);font:var(--ecl-font-m);color:var(--ecl-color-dark)}main{max-width:1080px;margin:auto;padding:40px}.mast{border-top:6px solid var(--ecl-color-branding);padding:32px;background:white}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ecl-color-primary-140)}h1{font:var(--ecl-font-3xl);font-weight:700;margin:16px 0;max-width:22ch}.mast p{max-width:72ch}.scope{font:var(--ecl-font-s);margin:24px 0;max-width:90ch}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:32px 0 16px}.toolbar p{margin:0}.ecl-accordion{background:white}.ecl-accordion__toggle-title{padding-right:16px}.ecl-accordion__toggle-icon{width:24px;height:24px}.ecl-accordion__content p:first-child{margin-top:0}.ecl-accordion__content ol,.ecl-accordion__content ul{padding-left:24px}.ecl-accordion__content li{margin:8px 0}.ecl-accordion__content h3{font-size:18px;line-height:1.4}.decision{border-left:4px solid var(--ecl-color-secondary);padding:16px;background:var(--ecl-color-neutral-20);margin:24px 0}.footer{font:var(--ecl-font-s);margin-top:24px;border-top:1px solid var(--ecl-color-neutral-60);padding-top:24px}.no-js .toolbar{display:none}@media(max-width:600px){main{padding:16px}.mast{padding:24px}h1{font:var(--ecl-font-2xl);font-weight:700}.ecl-accordion__toggle{overflow-wrap:anywhere}} ``` Code-Referenz - Speichern Sie die Datei HTML unter dem Namen index.html und ändern Sie die Namen der anderen bereitgestellten Dateien nicht. ### ecl-app.js — vollständiger Quelltext Native Initialisierung und ereignisgesteuertes Verhalten der Sammelaktion mit gut lesbarem anfänglichem HTML. ``` document.documentElement.classList.remove('no-js');ECL.autoInit();const root=document.querySelector('[data-ecl-accordion]');const buttons=[...root.querySelectorAll('[data-ecl-accordion-toggle]')];const all=document.querySelector('#all');function sync(){let open=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').length;document.querySelector('#count').textContent=open+' of '+buttons.length+' sections open';all.textContent=open===buttons.length?'Close all sections':'Open all sections';}root.ECLAccordion.on('onToggle',sync);buttons.forEach(b=>b.click());all.addEventListener('click',()=>{let close=buttons.every(b=>b.getAttribute('aria-expanded')==='true');buttons.filter(b=>(b.getAttribute('aria-expanded')==='true')===close).forEach(b=>b.click());});sync(); ``` Code-Referenz - Speichern Sie die Datei HTML unter dem Namen index.html und ändern Sie die Namen der anderen bereitgestellten Dateien nicht. ## Europa Component Library Einrichtung des Designsystem-Agenten ### Ausgangspunkt für die Implementierung Öffnen Sie http://localhost:8000/. Das Beispiel verwendet die EC-Voreinstellung und lädt keine zusätzlichen Symbole oder Schriftarten herunter. ``` npm init -y npm install @ecl/preset-ec@4.11.2 # Save index.html, ecl.css and ecl-app.js from the supplied examples. python3 -m http.server 8000 ``` ### Ein Prompt für dein Projekt ``` Setzen Sie die bereitgestellte ECL-EC-4.11.2-Akkordeonbeschreibung mit allen drei vollständigen Dateien um. Behalten Sie die nativen Beziehungen zwischen Trigger und Panel, die durch onToggle gesteuerte Anzahl, das Verhalten zum Öffnen und Schließen aller Elemente, die Aktivierung der Schaltflächen per Tastatur, das Lesen ohne JavaScript und den ausdrücklich angegebenen Umfang des Originalbeispiels bei. Erwecken Sie nicht den Eindruck, es handle sich um einen offiziellen EU-Dienst oder eine formelle Einreichung. ``` ## Quellen und Geltungsbereich des Europa Component Library-Designsystems Ein Anwendungsleitfaden zu ECL EC 4.11.2 für OpenDesign. Die ursprünglichen Beispielnotizen und das Seitenlayout stellen weder einen Dienst der Europäischen Kommission noch einen Förderaufruf oder eine rechtliche Anforderung dar. - Erste Schritte mit EC Assets der Voreinstellung und Einrichtung der Implementierung. - Hinweise zum Akkordeon Komponentenkontext und Anwendungsreferenz. - Farbrollen Primär-, Marken-, Neutral- und Statuspalette. - Stylesheet der festgelegten Voreinstellung Die genauen Werte, die in diesem Beispiel verwendet werden. ## Weiterführende Ressourcen zum Europa Component Library-Designsystem ### gov.cz Designsystem Entdecke die tatsächlichen Farbrollen, Kartenbereiche und die native Paginierung von Gov Design System CE anhand eines vollständigen Lesetoolkits mit sechs Ressourcen und explizitem Fokus- und Seitenstatus. ### GOV.UK Designsystem Erstellen Sie einen Frage- und Antwortablauf im GOV.UK-Stil mit der aktuellen Typografieskala v6, responsiven Abständen, funktionalen Farben, verknüpfter Validierung und konkreter Frontend-Integration. ### HarvardSites Designsystem Verstehen Sie HarvardSites als redaktionelle Plattform: Vergleichen Sie Website-Stile, wählen Sie dokumentierte Schriftkombinationen und gestalten Sie Universitätsseiten mit eigens dafür entwickelten Inhaltskomponenten. - [Implementierungsreferenz](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Quelle](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Quelle](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/spacing/) - [Quelle](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/typography/) - [Quelle](https://cdn.jsdelivr.net/npm/@ecl/vanilla-component-accordion@4.11.2/accordion.js) - [Code-Referenz](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Erste Schritte mit EC Assets der Voreinstellung und Einrichtung der Implementierung.](https://ec.europa.eu/component-library/v4.11.2/ec/getting-started/) - [Hinweise zum Akkordeon Komponentenkontext und Anwendungsreferenz.](https://ec.europa.eu/component-library/v4.11.2/ec/components/accordion/usage/) - [Farbrollen Primär-, Marken-, Neutral- und Statuspalette.](https://ec.europa.eu/component-library/v4.11.2/ec/guidelines/colours/) - [Stylesheet der festgelegten Voreinstellung Die genauen Werte, die in diesem Beispiel verwendet werden.](https://cdn.jsdelivr.net/npm/@ecl/preset-ec@4.11.2/dist/styles/ecl-ec.css)