Erstellen Sie mit echten Komponenten für öffentliche Dienste und einem expliziten Theme ein entsprechendes Interface. Diese Referenz verwendet Utrecht CSS, um die Zuordnung von Design-Tokens, den Aufbau einer Datenliste und zwei eigens entwickelte Themes mit demselben Bearbeitungsworkflow zu veranschaulichen.
Wechseln Sie zwischen den Original-Themes, bearbeiten Sie den Speicherort der Sammlung und speichern Sie sie oder brechen Sie ab, ohne den Datensatz zu ändern.
Native Utrecht CSS-Komponenten für Buttons und Datenlisten, Version 9.0.15, Original-Theme-Design-Tokens und Anwendungsinteraktion. · Implementierungsreferenz
02
NL Designsystem-Designreferenz
Konkrete Zusammenstellung von Komponenten eines Mitwirkenden: @utrecht/component-library-css 9.0.15. Öffentliche Design-Token-Namen und Klassen sind geprüfte APIs der Bibliothek; Zahlenwerte und Farben mit der Kennzeichnung „Beispiel“ sind Originaleinstellungen der Anwendung und keine allgemeingültige Spezifikation für NL Design System.
NL Design System unterstützt ausdrücklich die Kombination von Beiträgen verschiedener Organisationen und beschreibt den Hausstil jeder Organisation mithilfe von Design-Tokens. Die praktische Grundlage für die Einführung ist daher eine ausgewählte Komponentenimplementierung zusammen mit einem ausgewählten Theme. Auf dieser Seite werden die Implementierung des Utrecht-CSS-Mitwirkenden und ein eigens erstelltes Demonstrationstheme verwendet.
Diese Auswahl bedeutet nicht, dass Utrecht die maßgebliche Implementierung aller NL Design System-Komponenten ist. Sie bietet einen reproduzierbaren Weg, ohne eine landesweit einheitliche Schrift, blaue Farbe oder Abstands-Skala zu erfinden. Das tatsächlich verwendete native CSS-Paket ist @utrecht/component-library-css 9.0.15.
Anwendungswerte außerhalb der Bibliothek CSS halten
Das bereitgestellte Theme legt öffentliche benutzerdefinierte Eigenschaften --utrecht-* auf einem Wrapper fest. Der Button verwendet diese Werte, während seine Klasse den Aufbau der Komponente bestimmt. Variablen mit dem Präfix --_utrecht- sind interne Berechnungen im geprüften CSS; wer sie direkt ändert, bindet die Anwendung an Implementierungsdetails.
Das Türkis #005a5b und Violett #57328c des Beispiels sind Originalfarben der Anwendung. Sie veranschaulichen eine austauschbare Markenidentität, ohne eine kommunale Markenidentität zu kopieren. Für beide wird weißer Aktionstext verwendet; der Farbton für den Hover-Zustand ist separat festgelegt. Keine dieser Farben wird als offizieller Wert eines NL Design System-Design-Tokens bezeichnet.
css
.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
Legen Sie die noch fehlenden Theme-Entscheidungen fest
Die Demo definiert Arial, sans-serif mit 18 px und einem Zeilenabstand von 1,6 für das Lesen von Dokumenten. Das erste Theme verwendet eine Überschrift mit 32 px und eine Button-Ecke mit 4 px; das zweite nutzt dieselbe gut lesbare Schriftgröße für den Fließtext, eine Ecke mit 8 px und eine Überschrift mit Serifen. Diese Theme-Änderungen sind bewusst deutlich sichtbar.
Wenn kein Design-Token festgelegt ist, hat der native Button als Fallback eine minimale Blockgröße von 44 px. Unser Theme legt 48 px sowie explizites Padding für Block- und Inline-Richtung fest. Das ist ein echtes CSS-API mit einem anwendungsspezifischen Wert, keine vermutete, im gesamten Ökosystem geltende Abmessung. Das Layout verwendet eine maximale Inhaltsbreite von 56 rem und Abstände von 24 px, die in diesem Beispiel festgelegt sind.
Der Beleg verwendet ein dl mit .utrecht-data-list und dem Modifikator .utrecht-data-list--rows. Jedes .utrecht-data-list__item gruppiert ein dt-Schlüsselelement und einen dd-Wert. Der Modifikator rows aktiviert das responsive Raster sowie Zeilenabstände und Rahmen; ohne ihn bietet die Basis-Datenliste dieses Layout nicht. Das HTML bleibt auch vor dem Laden eines Themes aussagekräftig.
Unser Beleg führt einen Abholort, eine Referenz und den ausgewählten Artikel auf. Es handelt sich nicht um eine Tabelle mit sich wiederholenden Datensätzen: Jeder Schlüssel bezeichnet ein anderes Merkmal derselben Anfrage. Bei schmalen Ansichten stehen Schlüssel und Wert untereinander. Die Anwendung legt Zeilen-Design-Tokens fest, damit auch lange Ortsbezeichnungen ohne Abschneiden hineinpassen.
Verwenden Sie dt für den Attributnamen und dd für den aktuellen Wert.
Fassen Sie jedes Schlüssel-Wert-Paar im dokumentierten Element-Wrapper zusammen.
Ermöglichen Sie Zeilenumbrüche bei Kennungen und langen Ortsnamen, statt die Seite zu verbreitern.
.utrecht-button stellt die Basiskomponente bereit, und .utrecht-button--primary-action wählt die primäre Gruppe von Darstellungstokens aus. Für eine lokale Aktion, die kein umgebendes Formular absenden soll, benötigt das native Element weiterhin type=button. Die Datenliste bleibt schreibgeschützt, bis die Anwendung ein Bearbeitungsfeld öffnet.
Die Schaltfläche „Abholort ändern“ in der Demo blendet eine Gruppe nativer Optionsfelder ein. Beim Speichern werden der Wert in der Definitionsliste aktualisiert und der neue Ort über einen höflichen Statusbereich angekündigt. Beim Abbrechen wird das Feld geschlossen, ohne den gespeicherten Wert zu ändern. Diese Verhaltensweisen sind Teil des Anwendungscodes; allein durch die Installation eines CSS-Pakets werden sie nicht umgesetzt.
Die Theme-Auswahl ändert data-theme am äußeren Wrapper. Komponentenklassen, Datensatzwerte und das ausgewählte Optionsfeld bleiben erhalten. So wird die Trennung von White-Label-Designs konkret veranschaulicht: Derselbe Beleg und dieselbe Interaktion können unterschiedliche visuelle Identitäten unterstützen.
Der Theme-Wechsel dient hier der Entwicklungsdemonstration und ist keine Einstellung, die ein öffentlicher Dienst anbieten muss. Wählen Sie in einem realen Dienst mit mehreren Organisationen das Theme anhand einer vertrauenswürdigen Anwendungskonfiguration aus. Theme-Werte dürfen weder Anspruchsberechtigung und Validierung noch die Bedeutung eines Status verändern.
Laden Sie die versionierte Komponente CSS einmal.
Wenden Sie die relevanten Theme-Tokens auf ein umschließendes Element an.
Rendern Sie dasselbe semantische Komponenten-Markup innerhalb dieses Containers.
Prüfen Sie Fokus, Zeilenumbrüche und Statusfarben für jedes unterstützte Theme.
Das NL Design System-Vermittlungsmodell beschreibt, wie Beiträge schrittweise auf gemeinsame Standards hinarbeiten. Allein die Präsenz einer Komponente in einem Community-Repository garantiert nicht, dass jede Komposition produktionsreif ist. Prüfen Sie die ausgewählte Implementierung, die unterstützten Zustände und den aktuellen Reifegrad anhand der Komponentendokumentation.
In der Vorschau bleibt eine sichtbare Legende für die Ortsauswahl erhalten, das gespeicherte Ergebnis wird angekündigt und nach der Bearbeitung wird der Fokus auf die auslösende Schaltfläche zurückgesetzt. Beim Theme-Wechsel geht der Fokus nicht verloren. Die Ansicht lässt sich mit den nativen Tastatursteuerungen für Optionsfelder und den eigenen Fokusumrandungen der Anwendung bedienen. Diese Prüfungen ergänzen die Tests der Komponente des Beitragenden, ersetzen sie aber nicht.
NL Designsystem Installieren und das Theme selbst verwalten
Eine Integration ausschließlich mit CSS
Installieren Sie das verifizierte Paket CSS und importieren Sie dist/index.css über einen CSS-fähigen Bundler, gefolgt von Ihrem Theme-Stylesheet. Für die hier verwendete Datenliste und Schaltfläche, die ausschließlich CSS nutzen, ist weder ein React-Provider noch ein JavaScript-Komponenteninitialisierer erforderlich. Das ursprüngliche Anwendungsskript verwaltet Bearbeiten, Speichern, Abbrechen und den Theme-Wechsel.
Der gebündelte Komponentencode steht unter der Lizenz EUPL-1.2. Bewahren Sie bei der Weitergabe die Hinweise auf Quellcode und Lizenz auf. Leiten Sie aus einer Code-Lizenz keine Erlaubnis ab, das Logo einer Gemeinde wiederzuverwenden. Dieses Beispiel verwendet bewusst eigene Themes und keine kommunalen Kennzeichen.
Das vollständige Dokument enthält Layout, Steuerelemente und Initialisierung. Entpacken Sie das verknüpfte Beispielarchiv, um die exakten relativen Vendor-Assets zu erhalten, und stellen Sie es anschließend über HTTP bereit.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>NL Design System composition</title><link rel="stylesheet" href="vendor/utrecht-9.0.15/index.css"><style>.example-theme {
/* Original application values, not a national house style. */
--utrecht-document-font-family: Arial, sans-serif;
--utrecht-button-font-size: 1rem;
--utrecht-button-line-height: 1.5;
--utrecht-button-font-weight: 700;
--utrecht-button-border-radius: .25rem;
--utrecht-button-min-block-size: 48px;
--utrecht-button-padding-block-start: .75rem;
--utrecht-button-padding-block-end: .75rem;
--utrecht-button-padding-inline-start: 1.25rem;
--utrecht-button-padding-inline-end: 1.25rem;
--utrecht-button-primary-action-background-color: #005a5b;
--utrecht-button-primary-action-color: #fff;
--utrecht-button-primary-action-hover-background-color: #003f40;
--utrecht-button-primary-action-hover-color: #fff;
--utrecht-focus-outline-color: #111;
--utrecht-focus-outline-width: 3px;
--utrecht-focus-outline-offset: 3px;
--utrecht-focus-outline-style: solid;
}
*{box-sizing:border-box}body{margin:0}.example-theme{font:18px/1.6 Arial,sans-serif;color:#222;--accent:#005a5b;--wash:#eef6f4;--utrecht-data-list-rows-column-min-inline-size:12ch;--utrecht-data-list-rows-column-inline-size:45%;--utrecht-data-list-rows-gap:24px;--utrecht-data-list-rows-border-bottom-width:1px;--utrecht-data-list-rows-border-bottom-color:#ccd4d2;--utrecht-data-list-rows-item-padding-block-start:16px;--utrecht-data-list-rows-item-padding-block-end:16px;--utrecht-data-list-item-key-font-weight:700;--utrecht-data-list-item-value-line-height:1.6}.example-theme[data-theme=plum]{--accent:#57328c;--wash:#f5effa;--utrecht-button-primary-action-background-color:#57328c;--utrecht-button-primary-action-hover-background-color:#3c2262;--utrecht-button-border-radius:8px}.example-theme[data-theme=plum] h1{font-family:Georgia,serif}.toolbar{background:var(--wash);padding:20px 24px;border-bottom:4px solid var(--accent);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.toolbar label{font-size:16px}.toolbar select{font:inherit;max-width:100%;padding:8px}article{max-width:56rem;margin:auto;padding:32px 24px}h1{font-size:32px;line-height:1.3;margin:8px 0 24px}h2{font-size:24px}p{margin:16px 0}.utrecht-data-list__item-value{margin:0;overflow-wrap:anywhere}.utrecht-button{margin-block:8px}.editor{background:var(--wash);padding:24px;margin-block:24px}fieldset{border:0;padding:0;margin:0}legend{font-size:22px;font-weight:700;margin-bottom:16px}.choice{display:flex;align-items:center;gap:12px;padding:12px 0}.choice input{width:24px;height:24px;accent-color:var(--accent)}.buttons{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.cancel{font:inherit;background:none;border:0;text-decoration:underline;min-height:48px;color:var(--accent);cursor:pointer}small{display:block;font-size:14px;margin-top:32px;color:#555}:focus-visible{outline:3px solid #111;outline-offset:3px}[hidden]{display:none!important}#notice{font-weight:700;color:var(--accent)}@media(max-width:600px){.example-theme{--utrecht-data-list-rows-column-min-inline-size:100%;}h1{font-size:28px}.toolbar{align-items:flex-start;flex-direction:column}.editor{padding:16px}}
</style><main class="example-theme" data-theme="teal"><div class="toolbar"><strong>Community collection · Example</strong><label>Original theme <select id="theme"><option value="teal">Teal</option><option value="plum">Plum</option></select></label></div><article><p>CONTRIBUTOR COMPONENTS + YOUR THEME</p><h1>Review your collection details</h1><p>This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.</p><dl class="utrecht-data-list utrecht-data-list--rows"><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Item</dt><dd class="utrecht-data-list__item-value">Community reading pack</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Collection location</dt><dd class="utrecht-data-list__item-value" id="location">North library desk</dd></div><div class="utrecht-data-list__item"><dt class="utrecht-data-list__item-key">Reference</dt><dd class="utrecht-data-list__item-value">DEMO-2048</dd></div></dl><button id="edit" type="button" class="utrecht-button utrecht-button--primary-action">Change collection location</button><form class="editor" hidden><fieldset><legend>Choose a collection location</legend><label class="choice"><input type="radio" name="place" value="North library desk" checked>North library desk</label><label class="choice"><input type="radio" name="place" value="Riverside community room">Riverside community room</label><label class="choice"><input type="radio" name="place" value="Central welcome counter">Central welcome counter</label></fieldset><div class="buttons"><button class="utrecht-button utrecht-button--primary-action" type="submit">Save location</button><button type="button" class="cancel" id="cancel">Cancel</button></div></form><p id="notice" role="status"></p><small>Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.</small></article></main><script>
const main=document.querySelector('main'),theme=document.querySelector('#theme'),edit=document.querySelector('#edit'),form=document.querySelector('form'),locationText=document.querySelector('#location'),notice=document.querySelector('#notice');let saved=locationText.textContent;theme.onchange=()=>main.dataset.theme=theme.value;edit.onclick=()=>{form.hidden=false;edit.hidden=true;notice.textContent='';[...form.elements.place].forEach(r=>r.checked=r.value===saved);form.querySelector(':checked').focus()};function close(){form.hidden=true;edit.hidden=false;edit.focus()}form.onsubmit=e=>{e.preventDefault();saved=form.elements.place.value;locationText.textContent=saved;notice.textContent='Collection location updated to '+saved+'.';close()};document.querySelector('#cancel').onclick=()=>{notice.textContent='No changes saved.';close()};
</script></html>
Laden Sie das vollständige Beispiel unter Sources herunter. Die README enthält den genauen lokalen Startbefehl.
Behalten Sie die Vendor-Pfade relativ zu diesem Dokument bei. Das Archiv enthält alle Assets, die in dieser Vorschau verwendet werden.
04
NL Designsystem KI-Agent einrichten
Ausgangspunkt für die Implementierung
Die eigenständige Vorschau lädt dieselbe versionierte native CSS lokal. Komponenten für Schaltflächen und Datenlisten, die ausschließlich CSS nutzen, benötigen keinen React-Provider. Die ursprünglichen Theme-Werte müssen zusammen mit der Bibliothek bereitgestellt werden. Die vollständige ZIP-Datei mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem genau die benötigten Abhängigkeiten für die Vorschau und das vollständige Dokument. Entpacken Sie sie, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie dann http://localhost:8080/nl-design-system.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
bash
npm install @utrecht/[email protected]
# CSS-aware application entry:
# import '@utrecht/component-library-css/dist/index.css';
# import './example-theme.css';
# Wrap the dl/button composition in <main class="example-theme">.
# Add application event handlers for editing and theme selection.
Ein Prompt für dein Projekt
Agenten-Prompt
Verwenden Sie @utrecht/component-library-css 9.0.15 für eine Definitionsliste als Beleg und eine primäre Schaltfläche. Stellen Sie über öffentliche --utrecht-*-Tokens ein eigenes Theme bereit, das auf den Wrapper beschränkt ist, und lassen Sie interne Variablen --_utrecht-* unverändert. Ermöglichen Sie die Ortsbearbeitung mit beschrifteten Optionsfeldern sowie Speichern und Abbrechen, einer höflichen Änderungsankündigung und der Rückgabe des Fokus. Zeigen Sie ein zweites eigenes Theme, ohne das Komponenten-Markup zu ersetzen oder Daten zu verlieren. Kennzeichnen Sie alle numerischen Theme-Werte als Entscheidungen der Anwendung.
05
NL Designsystem Quellen und Geltungsbereich
NL Design System ist ein markenunabhängiges Ökosystem. In diesem Lernbeispiel wird die Implementierung eines Beitragenden mit zwei eigenen Themes kombiniert. Es erhebt weder den Anspruch, einen nationalen visuellen Stil darzustellen, noch verwendet es die Identität einer Gemeinde.
