Verwenden Sie die responsiven Schrift-, Abstands- und Farbrollen der schottischen Regierung in einem nativen Feld mit Zeichenzähler, das Texte auch bei Überschreitung des Limits beibehält und eine Korrektur ermöglicht.
Scottish Government Designsystem Interface-Vorschau
Geben Sie eine lange Notiz ein, bringen Sie sie wieder unter das Zeichenlimit, zeigen Sie sie lokal in der Vorschau an, bearbeiten Sie sie und setzen Sie sie zurück.
Native Scottish Government Design System 4.3.0 CharacterCount/CSS; eigene Workshop-Inhalte und lokale Validierung; Fallback-Schriftart Arial. · Implementierungsreferenz
02
Scottish Government Designsystem Designreferenz
Veröffentlichte CSS und JavaScript für Scottish Government Design System 4.3.0, mit aktuellen offiziellen Richtlinien zu Typografie, Farben und Raster. Native CharacterCount und Styling werden in der Vorschau ausgeführt. Arial ist eine ausdrücklich angegebene Fallback-Schriftart für ein unabhängiges Beispiel; schottische Regierungsdirektionen müssen Roboto verwenden. Die Ressourcen des aktuellen Pakets unterscheiden sich von älteren Installationsbeispielen.
Scottish Government Designsystem Eine praktische Referenz zur Texteingabe
Die Arbeit einer Person muss wiederherstellbar bleiben
Das bestimmende Interaktionsprinzip ist hier eine nicht destruktive Längenhilfe. Eine Person kann eine lange Notiz zu ihrem Unterstützungsbedarf einfügen, sehen, wie viel davon bearbeitet werden muss, und den gesamten Text behalten, während sie ihn kürzt. Der native Zeichenzähler zeigt die verbleibende Anzahl an, wendet den Stil bei Überschreitung an und gibt verzögert eine Meldung für assistive Technologien aus. Die Anwendung entscheidet separat, ob die Notiz für eine Vorschau ausreichend gültig ist.
Dies ist ein eigens erstelltes Beispiel für Workshop-Notizen, kein Angebot der schottischen Regierung und keine Aufforderung zur Angabe medizinischer Informationen. Es enthält keine Identitätsgrafiken, Speicherung oder Übermittlung. Der Feldhinweis fragt nach einem praktischen Unterstützungsbedarf und rät von privaten Angaben ab, damit die Aufgabe verständlich ist, ohne eine offizielle Transaktion nachzuahmen.
Scottish Government Designsystem Roboto und responsive Hierarchie
Die veröffentlichten Metriken beibehalten
Für Direktorate und Politikbereiche der schottischen Regierung schreibt das System Roboto vor. Andere Organisationen, die das System übernehmen, können eine andere gut lesbare Schriftart verwenden, sofern sie die Regeln für Schriftgröße und Zeilenhöhe beibehalten und das Ergebnis testen. Das eigenständige Beispiel gibt explizit Arial als Fallback an; es behauptet nicht, dass eine fehlende Webschrift Roboto sei.
Der Fließtext wechselt von 16/24px zu 19/32px, der Haupttitel von 30/40px zu 44/56px. Beide Änderungen erfolgen im nativen Stylesheet für größere Bildschirme. Eine Klasse ds_h 3 ändert die visuelle Größe, ohne eine Überschrift der dritten Ebene vorauszusetzen. Dieser Unterschied ist wichtig, wenn ein kurzes Formular einen kleineren Abschnittstitel benötigt, aber keine künstliche Lücke in der Dokumentgliederung entstehen soll.
Scottish Government Designsystem Eine klar unterscheidbare Fokusdarstellung
Fokus, Fehler und Abschluss voneinander unterscheiden
Blau übernimmt die primäre Marken- und Linkrolle, Schwarz dient der Textdarstellung und Gelb unterstützt den Fokus. Dies sind benannte Sass-Einstellungen und keine erfundene Sammlung benutzerdefinierter Eigenschaften von CSS. Die Markenanpassung erfolgt vor dem Laden des Systems über dessen Einstellungsmodul. Die offiziellen Richtlinien behalten die Fokuspalette auch dann bei, wenn andere Markenfarben geändert werden.
Der Zeichenzähler verwendet das negative Rot erst, wenn die zulässige Länge überschritten wird. Ein zusätzlicher anwendungsseitiger Fehler für ein leeres Pflichtfeld kann dieselbe Negativrolle verwenden; die Meldung muss jedoch eine fehlende Antwort beschreiben und kein Problem mit der Zeichenzahl. In der Vorschau wird positives Grün niemals verwendet, um den Erfolg einer externen Übermittlung zu suggerieren.
Eine sichtbare Tastaturfokus-Umrandung für das Textfeld und die Aktionsschaltflächen beibehalten.
Die Überschreitung der Zeichenlänge auch im Text beschreiben, nicht nur durch einen roten Rahmen.
Fehlerübersichten und Feldhinweise mit einer stabilen Feld-ID verknüpfen.
Scottish Government Designsystem Containerbreite und Abstände
Äußere und innere Breiten nicht verwechseln
Die offizielle Rastertabelle gibt innere Inhaltsbreiten von 736, 928 und 1120px an den mittleren, großen und extragroßen Breakpoints an. Die zugehörigen nativen Container-Boxen sind 768, 960 und 1152px breit, da sie auf jeder Seite 16px Innenabstand enthalten. Diese Unterscheidung verhindert, dass die beiden Breiten ineinander verschachtelt und Layouts dadurch versehentlich doppelt verengt werden.
Die Vorschau platziert eine Lesespalte mit einer Breite von 42rem im nativen Container. Diese Maximalbreite ist eine Anwendungsentscheidung, die sich für ein kurzes Formular eignet, keine neue Systemeinstellung. Unter 768px wird der Container fließend breit; derselbe seitliche Abstand von 16px schützt das Textfeld vor dem Bildschirmrand.
Abstands-Utilities sind responsiv. Zum Beispiel wächst ds_!_margin-bottom--4 bei 48rem von 24 auf 32px; auch größere Stufen nehmen zu. Die Referenz gibt beide Werte an, damit ein Desktop-Screenshot nicht als Beleg für einen universell festen Abstand missverstanden wird.
Scottish Government Designsystem Ein natives Feld mit Zeichenzähler
Mit einem echten Textfeld beginnen
Das Element mit der Klasse ds_question enthält data-module und den optionalen prozentualen Schwellenwert. Das zugehörige Label und der Hinweis sind gewöhnliche barrierefreie Elemente von HTML. Ein Textfeld mit maxlength bietet einen nützlichen Fallback ohne JavaScript. Nach der Erweiterung liest die Komponente diesen Wert aus und entfernt die Begrenzung, damit eingefügter Text nicht stillschweigend abgeschnitten wird.
Bei einem Feld mit 200 Zeichen und einem Schwellenwert von 80% wird der Zähler bei 160 Zeichen angezeigt. Der Beispieltext auf der öffentlichen Komponentenseite und das Codebeispiel mit 250 Zeichen verwenden nicht dieselben Zahlen; dieses Beispiel verwendet daher durchgängig ein einheitliches Limit. Ohne JavaScript nennt der sichtbare Hinweis weiterhin das Limit, und maxlength wird nativ angewendet.
html
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
Scottish Government Designsystem Zuständigkeiten der nativen Komponente
Meldungen, Zeitsteuerung und Zählung
Die versionierte Implementierung erstellt eine sichtbare Meldung mit aria-hidden und eine separate, für assistive Technologien ausgeblendete Meldung. Sie ergänzt die entsprechenden IDs im vorhandenen aria-describedby, statt den verfassten Hinweis zu verwerfen. Vor der Aktualisierung der ausgeblendeten Ankündigung wartet sie 1000 ms, damit die Rückmeldung während der Eingabe zuerst abgeschlossen werden kann.
Die tatsächliche Länge ergibt sich aus JavaScript string.value.length: Gezählt werden UTF-16-Codeeinheiten. Ein Zeichen außerhalb der Basic Multilingual Plane kann zwei Einheiten belegen, ein kombiniertes Emoji sogar mehr. Wenn ein Dienst eine andere Zählweise benötigt, müssen Zähler und serverseitige Validierung darauf abgestimmt sein. Diese Komponente sollte nicht versprechen, Zeichen so zu zählen, wie Menschen sie wahrnehmen.
Die Komponente reagiert auf input-Ereignisse. Wenn eine Anwendung programmatisch ein Beispiel einfügt oder das Feld leert, muss sie ebenfalls ein input-Ereignis auslösen. Die Beispiel- und Zurücksetzen-Aktionen der Demo tun dies. Ein Kommentar im Quellcode erwähnt eine Abfrage für die Spracherkennung; die geprüfte Implementierung richtet jedoch kein Abfrageintervall ein. Dieser Leitfaden behauptet daher nicht, dass dieses Verhalten unterstützt wird.
Scottish Government Designsystem Die aktuellen Release-Pfade verwenden
Modulladen und gezielte Initialisierung
Das aktuelle Paket heißt @scottish-government/design-system. Version 4.3.0 enthält das kompilierte Stylesheet unter dist/css/design-system.min.css, während sich ein älterer Installationsabschnitt noch auf dist/styles/main.css bezieht. Diese Anleitung verwendet das tatsächlich veröffentlichte Asset. Das Skript exportiert ein ES-Modul. Binde es daher mit type="module" statt mit einem gewöhnlichen klassischen Script-Tag ein.
Erstelle für dieses Feld eine CharacterCount-Instanz und rufe init auf. Für Seiten mit mehreren Komponenten steht auch DS.initAll zur Verfügung; in diesem Beispiel wird jedoch nur der benötigte Zähler initialisiert. Es ist kein zusätzlicher Analysedienst konfiguriert. Die serverseitige Validierung bleibt von der Bibliothek getrennt: Ein Zähler erleichtert die Eingabe, setzt aber keine Grenzen durch.
Installiere das auf Version 4.3.0 festgelegte Paket und kopiere das kompilierte CSS sowie das Modul in ein lokales Asset-Verzeichnis.
Füge die vollständige Struktur aus Beschriftung, Hinweis und Textbereich in die Seite ein, bevor du das Modul importierst.
Initialisiere den Zähler einmal und verknüpfe anschließend die Vorschau- und Zurücksetzen-Aktionen der Anwendung über reguläre input-Ereignisse.
Scottish Government Designsystem Verhalten bei Überschreitung der Grenze testen
Nicht nur ein leeres Feld testen
Beginne unterhalb des Grenzwerts, überschreite 160 Zeichen und füge dann mehr als 200 Zeichen ein. Der vollständige Text muss im Textbereich erhalten bleiben, während eine Meldung erscheint, dass zu viele Zeichen eingegeben wurden, und aria-invalid den Wert true annimmt. Verkürze den Text wieder unter den Grenzwert und bestätige, dass sich sowohl die Fehlerklasse als auch der Ungültigkeitsstatus zurücksetzen.
Die Vorschau-Aktion der Anwendung blockiert leere Notizen oder Notizen, die den Grenzwert überschreiten, und zeigt einen verknüpften Fehler an. Eine gültige Notiz erscheint in einer lokalen Vorschau über textContent, sodass eingegebener Markup-Code als Text angezeigt und nicht interpretiert wird. Mit „Notiz bearbeiten“ kehrst du zum selben Textbereich zurück, in dem der Text erhalten bleibt. „Zurücksetzen“ leert ihn über ein input-Ereignis, sodass auch der native Zähler zurückgesetzt wird.
Prüfe bei 390px den Zeilenumbruch des Titels, den Textbereich über die volle Breite, den Umbruch der Schaltflächen und die Fehlerübersicht. Bei größeren Ansichtsbreiten sollte die Lesespalte nicht zu einem übermäßig breiten Textblock werden. Diese Prüfungen gelten für dieses Beispiel; ein echter Dienst benötigt in seinem endgültigen Kontext weiterhin Nutzerforschung, Schriftartentests und eine Prüfung mit assistiven Technologien.
Scottish Government Designsystem Beispiele für Komponenten des Scottish Government Designsystem
Eine nicht destruktive Zeichenbegrenzung
Beschriftung, Hinweis, Textbereich und Schwellenwert bei 80 % – mit schrittweiser Erweiterung.
html
<div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div>
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>Scottish design system character count specimen</title><link rel="stylesheet" href="vendor/scot-4.3.0/dist/css/design-system.min.css"><style>body,button,input,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.reading{max-width:42rem}.eyebrow{border-top:4px solid #0065bd;padding-top:16px;color:#5e5e5e}.actions{display:flex;flex-wrap:wrap;gap:16px}.actions .ds_button{margin:0}.preview-text{white-space:pre-wrap;overflow-wrap:anywhere;border-left:4px solid #b3b3b3;padding-left:24px}[hidden]{display:none!important}</style><main class="ds_wrapper"><div class="reading"><p class="ds_small eyebrow">Independent specimen · Workshop access note</p><section id="entry"><h1>Tell us what would help</h1><p>Practice a short access note for a community workshop. This page does not save or send your text.</p><div id="error" class="ds_error-summary" tabindex="-1" hidden><h2 class="ds_error-summary__title">There is a problem</h2><p><a href="#access-note" id="error-link"></a></p></div><form id="form" novalidate><div class="ds_question" data-threshold="80" data-module="ds-character-count">
<label class="ds_label" for="access-note">What would help you take part?</label>
<p class="ds_hint-text" id="access-hint">Describe an access need for this practice workshop. Do not include medical or contact details.</p>
<textarea maxlength="200" class="ds_input" rows="5" id="access-note"
name="access-note" aria-describedby="access-hint"></textarea>
</div><p class="ds_small">Use up to 200 characters. The count appears after 160.</p><div class="actions"><button class="ds_button" type="submit">Preview note</button><button class="ds_button ds_button--secondary" id="sample" type="button">Try a long example</button><button class="ds_button ds_button--secondary" id="reset" type="button">Reset</button></div></form></section><section id="preview" hidden><h1 tabindex="-1">Your note preview</h1><p id="result" class="preview-text"></p><p>No note has been sent. You can return to edit it.</p><button id="edit" class="ds_button ds_button--secondary">Edit note</button></section></div></main><script type="module">import DS from './vendor/scot-4.3.0/dist/scripts/design-system.js';const field=document.querySelector('[data-module="ds-character-count"]');new DS.components.CharacterCount(field).init();const input=document.querySelector('#access-note'),entry=document.querySelector('#entry'),preview=document.querySelector('#preview'),error=document.querySelector('#error');function setValue(value){input.value=value;input.dispatchEvent(new Event('input',{bubbles:true}));input.focus()}document.querySelector('#sample').onclick=()=>setValue('A clear route from the entrance to the workshop room would help me take part. Please describe where the quiet seating area is and whether instructions will be available in writing. I would also appreciate knowing where to find the nearest accessible entrance.');document.querySelector('#reset').onclick=()=>{setValue('');error.hidden=true};document.querySelector('#form').onsubmit=e=>{e.preventDefault();let message=!input.value.trim()?'Enter a short access note.':input.value.length>200?'Shorten your note to 200 characters or fewer.':'';if(message){document.querySelector('#error-link').textContent=message;error.hidden=false;error.focus();return}error.hidden=true;document.querySelector('#result').textContent=input.value;entry.hidden=true;preview.hidden=false;preview.querySelector('h1').focus()};document.querySelector('#edit').onclick=()=>{entry.hidden=false;preview.hidden=true;input.focus()};window.demoReady=true;</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
Scottish Government Designsystem Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Die lokale Demo verwendet das echte Scottish Government Design System 4.3.0 CSS und das CharacterCount-Modul. Die Schriftarten-Fallback-Option ist ausdrücklich festgelegt; der ältere Pfad dist/styles von der Installationsseite kommt nicht zum Einsatz. Das vollständige ZIP mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die benötigten Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacke es, führe in diesem Verzeichnis python3 -m http.server 8080 aus und öffne dann http://localhost:8080/scottish-government.html. Öffne Beispiele mit Modulen nicht über file://.
bash / HTML
npm install --save-exact @scottish-government/[email protected]
mkdir -p public/vendor/scot
cp node_modules/@scottish-government/design-system/dist/css/design-system.min.css public/vendor/scot/
cp node_modules/@scottish-government/design-system/dist/scripts/design-system.js public/vendor/scot/
<link rel="stylesheet" href="/vendor/scot/design-system.min.css">
<script type="module">
import DS from '/vendor/scot/design-system.js';
const root = document.querySelector('[data-module="ds-character-count"]');
new DS.components.CharacterCount(root).init();
// Or DS.initAll() when the page uses multiple DS components.
</script>
Ein Prompt für dein Projekt
Agenten-Prompt
Verwende die echte CharacterCount-Komponente des Scottish Government Design System 4.3.0 in einem unabhängigen Formular für Zugangsnotizen. Lege die geprüften Pfade dist/css/design-system.min.css und dist/scripts/design-system.js für ES-Module fest. Stelle einen Textbereich mit 200 Zeichen und einem Schwellenwert von 80 % sowie einem zugehörigen Hinweis und gezielter Komponenteninitialisierung bereit. Erhalte eingefügten Text auch bei Überschreitung des Grenzwerts, überlasse Zählung und ARIA-Aktualisierungen der Bibliothek und ergänze eine separate lokale Validierung sowie eine sichere Vorschau, Bearbeitung und Zurücksetzen, die nur Text verwenden. Programmatische Beispiel- und Zurücksetzen-Aktionen müssen input-Ereignisse auslösen. Verwende die veröffentlichten responsiven Schrift- und Abstandsregeln, triff eine ausdrückliche Schriftartentscheidung und verzichte auf offizielle Kennzeichen oder eine vorgetäuschte Übermittlung.
05
Scottish Government Designsystem Quellen und Geltungsbereich
Referenz für eine unabhängige Implementierung. Direktionen der schottischen Regierung müssen Roboto verwenden; dieses nicht markengebundene Beispiel legt Arial ausdrücklich als Ausweichschrift fest. Originaltext, keine Speicherung oder Übermittlung und keine offizielle Zugehörigkeit. Die Code-Lizenz und die Genehmigungen für grafische Assets der Regierung sind getrennte Angelegenheiten.
