Untersuchen Sie Europas Farb-, Typografie- und Abstandsrollen in EC anhand eines vollständigen nativen Accordion-Briefings – einschließlich Tastaturbedienung, „Alle öffnen“-Verhalten und lesbarem Fallback ohne JavaScript.
Native EC 4.11.2 CSS- und Akkordeon-Laufzeitumgebung mit Originalinhalt und Schaltfläche „Alle öffnen“. · Implementierungsreferenz
02
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.
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.
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.
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.
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
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
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.
Die fixierte EC-Voreinstellung installieren.
index.html, ecl.css und ecl-app.js zusammen speichern.
Das Verzeichnis bereitstellen und einzelne sowie Sammelaktionen testen.
Mit Tastatur, schmalem Ansichtsfenster und deaktiviertem JavaScript erneut testen.
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.
html
<!doctype html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Public conversation brief</title><link rel="stylesheet" href="./node_modules/@ecl/preset-ec/dist/styles/ecl-ec.css"><link rel="stylesheet" href="./ecl.css"></head><body><main><header class="mast"><p class="eyebrow">European Commission preset / original study</p><h1>A clear brief for a public conversation</h1><p>Explore three preparation notes with native ECL expandable sections and an explicit open-all control.</p></header><p class="scope">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.</p><div class="toolbar"><p id="count" role="status">0 of 3 sections open</p><button id="all" type="button" class="ecl-button ecl-button--secondary">Open all sections</button></div><div class="ecl-accordion" data-ecl-accordion data-ecl-auto-init="Accordion"><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="purpose" aria-expanded="true" id="toggle-purpose" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Define the purpose before collecting information</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="purpose" role="region" aria-labelledby="toggle-purpose"><p>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.</p><h3>Make a decision possible</h3><ol><li>State which decision the conversation will inform.</li><li>List information already available before asking participants for more.</li><li>Name what remains outside the consultation.</li></ol><aside class="decision"><h3>Keep the outcome proportionate</h3><p>A short conversation may support a next step; it does not by itself prove consent, eligibility or public support.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="participation" aria-expanded="true" id="toggle-participation" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Make participation understandable and accessible</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="participation" role="region" aria-labelledby="toggle-participation"><p>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.</p><h3>Provide usable alternatives</h3><ol><li>Offer a plain-language explanation of the activity.</li><li>Allow a person to contribute without speaking to the whole group.</li><li>Explain how to ask for an accessible format.</li></ol><aside class="decision"><h3>Check the invitation itself</h3><p>A technically accessible page is only one part of participation. Timing, language and the route for asking a question also affect who can join.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="record" aria-expanded="true" id="toggle-record" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Record decisions and unresolved questions separately</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="record" role="region" aria-labelledby="toggle-record"><p>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.</p><h3>Prepare a readable follow-up</h3><ol><li>Write the next action with an owner and review date.</li><li>Make open questions visible alongside conclusions.</li><li>Invite participants to correct an inaccurate summary.</li></ol><aside class="decision"><h3>Avoid a false completion signal</h3><p>Closing these panels is a reading action only. This preview sends no consultation response and records no formal approval.</p></aside></div></section></div><p class="footer">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.</p></main><script src="./node_modules/@ecl/preset-ec/dist/scripts/ecl-ec.js"></script><script src="./ecl-app.js"></script></body></html>
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.
javascript
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();
Speichern Sie die Datei HTML unter dem Namen index.html und ändern Sie die Namen der anderen bereitgestellten Dateien nicht.
04
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.
sh
npm init -y
npm install @ecl/[email protected]
# Save index.html, ecl.css and ecl-app.js from the supplied examples.
python3 -m http.server 8000
Ein Prompt für dein Projekt
Agenten-Prompt
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.
05
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.
