Erstellen Sie einen ausführlichen Leitfaden im Ontario-Stil mit echter Typografie, veröffentlichten Abstands- und Farbwerten, nativem Akkordeonverhalten und vollständigem, versionsgenauem Quellcode.
Ontario 9.1.0 veröffentlicht CSS und Akkordeon-Skript, lokal gebündelte Schriftdateien, Originalinhalte und Handler zum verknüpften Öffnen. · Implementierungsreferenz
02
Ontario Designsystem Designreferenz
Ontario-Design-Tokens und complete-styles 9.1.0; tatsächliche Paketexportpfade, Akkordeon-SCSS und veröffentlichtes Skript wurden lokal überprüft.
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-greyscale-black
#1A1A1A
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-greyscale-greyscale5
#F2F2F2
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-greyscale-greyscale20
#CCCCCC
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-link
#0066CC
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-link-hover
#00478F
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-link-active
#002142
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-link-visited
#551A8B
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-focus
#009ADB
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-alert
#CD0000
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-success
#118847
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
--ontario-colour-system-information
#1080A6
Tatsächlicher Token-Export aus Version 9.1.0. Die kompilierte Komponente CSS ordnet diesen Rollen Werte zu; der Import eines Tokens allein erzeugt keine Komponente.
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-font-sizes-standard-body-text
1rem
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-font-sizes-large
1.25rem
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-font-sizes-x-large
1.5rem
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-breakpoints-small
40em
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-breakpoints-medium
73em
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-grid-columns-total-columns
12
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-grid-columns-row-width
1152
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
--ontario-grid-columns-column-gutter
32
Veröffentlichter Tokenwert; einheitenlose Rasterwerte beschreiben das Ausgangssystem und müssen im Kontext der jeweiligen Rasterimplementierung interpretiert werden.
03
Ontario Designsystem Vollständiger Leitfaden
Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface.
DESIGN-ontario.md
Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen.
Ontario Designsystem Paket-Exporte und Komponentenstile
Das vollständige Styles-Paket gezielt verwenden
Das Beispiel bindet @ongov/ontario-design-system-complete-styles 9.1.0 fest ein und verwendet das veröffentlichte Skript zum Auf- und Zuklappen. Es handelt sich um eine Implementierung mit HTML/CSS, nicht um die separate Ontario-Web-Component-Laufzeitumgebung. Die Exportzuordnung des Pakets stellt das kompilierte Theme unter styles/css/compiled/ontario-theme.min.css bereit; ein vermuteter Deep-Import mit einem zusätzlichen dist-Präfix schlägt bei einem modernen Bundler fehl.
Akkordeonregeln einbinden
Im untersuchten Paket der Version 9.1.0 sind die Akkordeon-Selektoren, die dieses Beispiel verwendet, nicht im kompilierten Theme enthalten. Die Seite bindet deshalb Regeln ein, die aus dem paketeigenen ontario-accordion.scss kompiliert wurden und im bereitgestellten CSS enthalten sind. Das Skript wird aus dem veröffentlichten Verzeichnis dist/scripts kopiert, da dieser Deep-JavaScript-Pfad nicht exportiert wird. Dies sind konkrete Build-Anforderungen und keine optionale visuelle Verfeinerung.
Ontario Designsystem Ontario-Typografie und Hierarchie
Die vorgesehene Schriftkombination beibehalten
Das veröffentlichte Theme verwendet Raleway Modified für Überschriften und Open Sans für Fließtext. Die Vorschau enthält die normalen Schriftschnitte 400 und 700, die auf der Seite verwendet werden. So bleiben die markanten Buchstabenformen der Überschriften erhalten, ohne von extern geladenen Schriften abhängig zu sein. Die Typografie sollte nach dem Laden der Schriften überprüft werden: Die Darstellung mit einer Ersatzschrift kann sowohl die Zeilenumbrüche als auch die relative Stärke der Akkordeonüberschriften verändern.
Abschnitte schnell erfassbar machen
Der Titel führt eine Aufgabe ein, der Vorspann erklärt die Nutzung des Leitfadens und drei Abschnittsüberschriften geben eine klare Reihenfolge vor. Begleitende Absätze und Listen stehen in den jeweiligen Bereichen. Der Hinweis daneben bleibt sichtbar, denn wichtige Informationen zur Teilnahme und zum Zugang sollten nicht davon abhängen, dass jemand ein verborgenes Feld entdeckt. Die Hierarchie ist Teil des Inhaltsmodells und kein Grund, jeden Satz zur Überschrift zu machen.
Ontario Designsystem Farbrollen und Hinweise auf die Bedienbarkeit von Komponenten
Links und Fokus erfüllen unterschiedliche Aufgaben
Die exportierte Linkfarbe ist #0066CC; Hover-, Aktiv- und Besuchsfarben sind separat definiert. Der Fokus verwendet #009ADB. Das Akkordeon kombiniert eine sichtbare Beschriftung, ein Richtungssymbol und einen Zustand für den geöffneten Bereich; sein Verhalten lässt sich nicht allein anhand blauen Texts erklären. Die graue Abgrenzung unterscheidet die Abschnitte voneinander, ohne jeden Absatz in eine eigene Karte zu verwandeln.
Verwenden Sie die veröffentlichte Abstandsabfolge
Die Abstandstabelle reicht von null bis fünf Rem und enthält benannte Zwischenstufen. Das Beispiel setzt ein eigenes zweispaltiges Layout um die offiziellen Komponentenregeln herum. Der Umbruch bei 760px ist eine Gestaltungsentscheidung für diesen eingebetteten Leitfaden und wird nicht als neuer Ontario-Breakpoint ausgegeben. Die offiziellen Breakpoints sind separat in der Referenztabelle aufgeführt.
Ontario Designsystem Akkordeonstruktur und -status
Verknüpfen Sie jeden Button mit seinem Inhalt
Jeder Abschnitt hat eine Überschrift mit einem echten Button. Dessen aria-controls verweist auf einen eindeutig gekennzeichneten Inhaltsbereich, und aria-expanded gibt an, ob dieser Bereich geöffnet ist. Der Inhaltsbereich verweist über aria-labelledby auf den Button. Das native Skript synchronisiert beim Öffnen und Schließen die Klassen der Komponente mit aria-hidden. Eine doppelte ID würde diese Beziehung unterbrechen, selbst wenn das visuelle Layout korrekt aussieht.
Verwenden Sie eindeutige IDs für Button und Inhaltsbereich.
Setzen Sie die Überschrift um einen echten interaktiven Button.
Stimmen Sie das Markup auf das Sichtbarkeitsverhalten des versionierten Skripts ab.
Halten Sie die Steuerelemente für alle Abschnitte synchron
Ontario Designsystem Verlinkter Einstieg und wichtige Inhalte
Öffnen Sie einen Abschnitt über seinen echten Button
Die Links in der Seitenleiste kennzeichnen einen Abschnitt und lösen anschließend dessen nativen Button aus, wenn der Abschnitt geschlossen ist. Nach dem Öffnen wird der Fokus auf den Button gesetzt. So werden das erweiterte Attribut des Buttons, die Überschriftenklasse und die Sichtbarkeit des Inhalts in einem einzigen Zustandswechsel synchronisiert. Der zusätzliche Handler ist Anwendungscode und vollständig enthalten, damit sich das Verhalten nachvollziehen lässt.
Formulieren Sie aufklappbare Zusatzinformationen mit Mehrwert
Die drei gestalteten Abschnitte behandeln Vorbereitung, Materialien und Nachbereitung eines kleinen Workshops. Jeder enthält konkrete Handlungsschritte und einen Absatz, der den Umfang des Beispiels erläutert. Bei einer tatsächlichen Einladung müssen Zweck, Zugangsmodalitäten und Teilnahmeinformationen weiterhin direkt sichtbar sein. Dieses Muster strukturiert einen längeren Leitfaden; wichtige Informationen sollten nicht verborgen werden, nur damit die Seite kürzer wirkt.
Ontario Designsystem Vollständiger Quellcode und Überprüfung
Erstellen Sie das versionierte Beispiel nach
Erstellen Sie ein Vite-Projekt mit Vanilla JavaScript, installieren Sie das festgelegte complete-styles-Paket und kopieren Sie dessen Aufklappskript nach src. Speichern Sie die bereitgestellten Dateien main.js und ontario.css und behalten Sie dabei das Root-Mountelement bei. CSS enthält die für diese Version kompilierten offiziellen Akkordeonregeln sowie klar gekennzeichnete eigene Layoutregeln. Für diese Implementierung von HTML sind weder eine Komponentenregistrierung noch ein Backend-Dienst erforderlich.
Installieren Sie das festgelegte complete-styles-Paket.
Kopieren Sie dessen Aufklappskript und speichern Sie den vollständigen Einstiegspunkt sowie CSS.
Öffnen Sie alle Bereiche und schließen Sie anschließend einen Abschnitt über seinen Link und öffnen Sie ihn erneut.
Prüfen Sie den Tastaturfokus, die erweiterten Attribute und das Layout auf dem Smartphone.
Verknüpfungen und Gruppenverhalten prüfen
Testen Sie, ob sich jeder Abschnitt öffnen lässt, schließen Sie alle und verwenden Sie anschließend einen Link in der Seitenleiste, um den mittleren Abschnitt erneut zu öffnen. Prüfen Sie, ob der erweiterte Zustand des Buttons mit der Sichtbarkeit des Inhalts übereinstimmt. Wiederholen Sie den Test auf Smartphone-Breite, bei der die Seitenleiste unterhalb des Leitfadens angezeigt wird. Bei der lokalen Prüfung wird außerdem bestätigt, dass Schriftdateien geladen werden, die Seite keinen horizontalen Überlauf aufweist und das native Skript keine Browserfehler verursacht.
Ontario Designsystem Beispiele für Komponenten des Designsystems
main.js — vollständiger Workshop-Leitfaden
Vollständiger eigener Inhalt, Import des veröffentlichten Skripts und Verhalten zum Öffnen über Links.
javascript
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
Für diese festgelegte Version werden sowohl das kompilierte Theme als auch das komponentenspezifische Akkordeon-Stylesheet benötigt.
04
Ontario Designsystem Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Die Vorschau verwendet dasselbe veröffentlichte Akkordeonskript mit lokalen Schriftdateien. Die separate Webkomponentenbibliothek wird im Beispiel nicht geladen.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie den Ontario-Workshop-Leitfaden mit complete-styles 9.1.0 und dem dazugehörigen Akkordeonskript. Fügen Sie das komponentenspezifische Akkordeon-CSS, die echten Schriftarten Raleway Modified und Open Sans, barrierefreie IDs für Button und Inhalt sowie ein synchronisiertes Auf- und Zuklappverhalten hinzu. Lassen Sie wichtige Informationen sichtbar und führen Sie Abschnittslinks über die nativen Buttons.
05
Ontario Designsystem Quellen und Geltungsbereich
Ein mit OpenDesign erstellter Workshop-Leitfaden, der die Stile von Ontario 9.1.0 und das dazugehörige veröffentlichte Aufklappskript verwendet. Inhalt und Seitengestaltung sind eigenständig; dies ist keine offizielle Serviceseite.
