Nutze die Typografie, responsiven Abstände, gruppierten Optionsfelder und kontextbezogenen Details von NHS.UK, um einen klaren Ablauf zur Auswahl von Terminpräferenzen zu gestalten.
Natives NHS.UK frontend 10.6.1 mit CSS/JS, Arial-Überschreibung und lokalem Originalzustand; keine Anbindung an klinische Dienste. · Implementierungsreferenz
02
NHS Designsystem-Designreferenz
NHS.UK frontend 10.6.1 und NHS Digital Service Manual. Die Vorschau verwendet das offizielle lokale CSS/JS mit Arial, nicht die lizenzpflichtige Schrift Frutiger oder das NHS-Logo. Responsive Werte wurden anhand des ausgewählten Pakets geprüft; klinische Inhalte sind nicht enthalten.
Eine Gesundheitsoberfläche ohne vorgetäuschte Identität
Das NHS.UK-Frontend liefert die visuelle und interaktive Grundlage. Es vereinbart jedoch keine Termine und entscheidet auch nicht, welche Teilnahmearten eine Klinik unterstützt. Die Studie zeigt einen fiktiven Termin und lässt Besucherinnen und Besucher eine Präferenz auswählen. Das Ergebnis ist eine lokale Übersicht, keine Buchung.
Frutiger ist ein NHS-Markenbestandteil, für den Lizenzbedingungen gelten. Diese unabhängige Ressource verwendet Arial, die dokumentierte Ausweichschrift, und verzichtet auf das NHS-Logo. Die offizielle CSS bleibt unverändert; eine explizite lokale Schriftüberschreibung verhindert Anfragen nach Frutiger.
Verwende nhsuk-heading-l für die Frage auf der Seite und nhsuk-heading-m für einen untergeordneten Abschnitt. Das unterscheidet sich von einer längeren redaktionellen Seite, auf der die Anleitung mit heading-xl beginnt. Die Radiobutton-Gruppe kann eine Legende in Überschriftengröße verwenden, ohne ihre Gruppenbedeutung zu verlieren.
Reguläre Absatzklassen unterscheiden zwischen Fließtext, Einleitung und kleingedrucktem Begleittext. Ein einleitender Text mit 26px eignet sich einmal am Anfang einer Seite; Termininformationen bleiben hingegen gewöhnlicher Fließtext. Die Vorschau bietet ausreichend Zeilenbreite, damit Datumsangaben und Ortsnamen umgebrochen werden können.
Das NHS-Abstandsraster unterscheidet sich vom GOV.UK-Abstandsraster
Die responsiven NHS-Einheiten folgen einer anderen Reihenfolge und wechseln oberhalb von 768px. Einheit 6 ändert sich beispielsweise von 32px auf 40px. Übernimm den Wert der GOV.UK-Einheit 6 nicht für NHS, nur weil die Namen der Hilfsklassen ähnlich aussehen.
Die Demo verwendet den 960px-Container und eine Lesespalte mit zwei Dritteln der Breite. Das native Raster wechselt unterhalb der Desktopgröße zu einer einzelnen Spalte. Die Layoutänderungen werden von der Bibliothek gesteuert; der schmale, unabhängige Identitätsstreifen ist hingegen eine Anwendungsformatierung.
In der Dokumentation werden 641px als Tablet- und 769px als Desktop-Breite angegeben. Die Spaltenbreiten des Rasters beginnen bei der Desktop-Breite. Das bedeutet nicht, dass für alle Typografieregeln dieselbe Grenze gilt. Verwende die nativen Klassen, anstatt für alle Eigenschaften einen einzigen globalen Breakpoint festzulegen.
NHS Designsystem Gruppierte Auswahl der Teilnahmeart
Ein Fieldset, eine Antwort
Das Beispiel verwendet nhsuk-fieldset mit einer sichtbaren Legende und einem gemeinsamen name-Attribut für die Radiobuttons. Jedes Eingabefeld hat eine eigene id und ein eigenes Label. Der Hinweis wird über aria-describedby der Gruppe zugeordnet. So kann der Browser eine einzelne Auswahl aus sich gegenseitig ausschließenden Optionen darstellen.
Die Struktur eines Radio-Elements platziert das Eingabefeld und sein Label innerhalb von nhsuk-radios__item. Standard-Radiobuttons eignen sich für eine zentrale Frage; die kleine Variante ist für kompaktere Filterbereiche gedacht. Die fiktiven Teilnahmearten schließen sich gegenseitig aus, auch wenn sie mit den Pfeiltasten bedient werden.
Die Legende benennt die Entscheidung.
Der gemeinsame Name für die Teilnahmeart bildet die Auswahlgruppe.
Jedes Label verweist auf eine andere Eingabefeld-ID.
NHS Designsystem Hilfe, ohne Wichtiges zu verbergen
Ein natives details-Element verwenden
Das details-Beispiel enthält nhsuk-details__summary mit einem summary-text-Span, gefolgt von nhsuk-details__text. Es wird mit dem nativen Verhalten des Browsers geöffnet. Die Terminangaben und der Hinweis, dass keine Buchung erfolgt, müssen außerhalb des aufklappbaren Bereichs stehen, da alle diese Informationen benötigen.
In Version 10.6 verwendet das Nunjucks-API summary.text oder summary.html; die ältere Option summaryText ist veraltet. Wenn du Macros verwendest, solltest du die neue Objektstruktur bevorzugen. Das Beispiel mit HTML vermeidet eine Templating-Abhängigkeit und behält dennoch dieselbe Struktur bei.
Die Gruppe validieren, ohne eine Option vorauszuwählen
Zu Beginn ist keine Option ausgewählt. Wenn ohne Antwort fortgefahren wird, erscheint eine Inline-Fehlermeldung, die der Gruppe zugeordnet ist. Die Vorschau setzt anschließend den Fokus auf den Fehler. Bei der Rückkehr aus der Übersicht bleibt die Auswahl sichtbar. Diese Entscheidungen zum Anwendungsstatus ergänzen die nativen Steuerelemente.
In der Übersicht werden die gewählte Teilnahmeart und die Angaben zum fiktiven Termin erneut angezeigt. Die Aktion ist mit „Präferenz ändern“ beschriftet. Es gibt keine Bestätigung, die den Eindruck erweckt, ein medizinischer Dienst habe die Präferenz angenommen. Ebenso werden keine Gesundheitshinweise oder Vorbereitungsanforderungen erfunden.
Fahre fort, ohne eine Teilnahmeart auszuwählen.
Wähle „Telefon“ und öffne die lokale Übersicht.
Ändere die Präferenz zu „Vor Ort“ und sieh dir die aktualisierte Übersicht an.
Bei der Einrichtung werden das CSS in Version 10.6.1 und das Browsermodul in ein Verzeichnis für statische Assets kopiert. Das Modul exportiert initAll. Rufe die Funktion auf, nachdem das Markup der Komponente eingefügt wurde. Das eigenständige Beispiel verwendet dieselbe lokal bereitgestellte Distribution und eine Arial-Überschreibung auf Seitenebene.
Die Stylesheets enthalten Komponentenregeln und responsive Grundlagen. Das kleine Skript, das die Übersichtsansicht ändert, ist davon unabhängiger Anwendungscode. In einem Produktivsystem würde der fiktive Termineintrag durch gepflegte Daten ersetzt. Eine echte Präferenzanfrage würde über das eigene Backend verarbeitet.
Entscheidend ist, dass Besucherinnen und Besucher den Termin erkennen, verstehen, dass eine Teilnahmepräferenz noch nicht bestätigt ist, und die gewählte Teilnahmeart ändern können, ohne den Kontext zu verlieren. Eine allgemeine Erfolgsmeldung würde diesen Unterschied verschleiern.
Teste die Bedienung der Radiobutton-Gruppe und der details-Zusammenfassung mit der Tastatur. Prüfe anschließend die schmale Ansicht mit einem langen Kliniknamen. Bei einem Fehler wegen fehlender Auswahl sollte der Fokus zurück zur Gruppe führen. Die Bibliothek stellt wiederverwendbares Verhalten bereit; die Organisation bleibt für die tatsächlichen Terminregeln und medizinischen Informationen verantwortlich.
Das native details-Element stellt zusätzliche Informationen bereit, ohne die Aufgabe zu verbergen.
html
<details class="nhsuk-details">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">About these example choices</span>
</summary>
<div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details>
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"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Appointment preference — OpenDesign study</title><link rel="stylesheet" href="vendor/nhsuk-10.6.1/nhsuk-frontend.min.css"><style>body,body *,body *::before,body *::after{font-family:Arial,sans-serif!important}[hidden]{display:none!important}.study-strip{background:white;border-bottom:1px solid #d8dde0;padding:16px}.study-strip p{margin:0}.study-card{background:#fff;border:1px solid #d8dde0;padding:24px;margin-bottom:32px}h1:focus{outline:none}.study-result{border-left:4px solid #005eb8;padding:16px 24px;background:white}button,a,input{touch-action:manipulation}</style></head><body><header class="study-strip"><p class="nhsuk-body-s"><strong>OpenDesign · NHS component study</strong><br>Fictional appointment. This page cannot book or change care.</p></header><main class="nhsuk-width-container nhsuk-main-wrapper nhsuk-main-wrapper--s" id="maincontent"><div class="nhsuk-grid-row"><div class="nhsuk-grid-column-two-thirds"><div class="study-card"><h2 class="nhsuk-heading-m">Example appointment</h2><p class="nhsuk-body">Community clinic · Alex Example<br>Tuesday, 20 October · 10:30am</p></div><section id="choice"><h1 class="nhsuk-heading-l">Choose an attendance preference</h1><form id="form" novalidate><div class="nhsuk-form-group" id="group"><fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
<legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--m">How would you prefer to attend?</legend>
<div class="nhsuk-hint" id="contact-hint">Select one option.</div>
<div class="nhsuk-radios" data-module="nhsuk-radios">
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="in-person" name="attendance" type="radio" value="in-person">
<label class="nhsuk-label nhsuk-radios__label" for="in-person">In person</label>
</div>
<div class="nhsuk-radios__item">
<input class="nhsuk-radios__input" id="telephone" name="attendance" type="radio" value="telephone">
<label class="nhsuk-label nhsuk-radios__label" for="telephone">Telephone</label>
</div>
</div>
</fieldset></div><details class="nhsuk-details">
<summary class="nhsuk-details__summary">
<span class="nhsuk-details__summary-text">About these example choices</span>
</summary>
<div class="nhsuk-details__text"><p>These are fictional options, not available appointment slots.</p></div>
</details><button class="nhsuk-button" type="submit">Review preference</button></form></section><section id="review" hidden><h1 class="nhsuk-heading-l" tabindex="-1" id="review-title">Your preference</h1><div class="study-result"><p class="nhsuk-body" id="selected"></p><p class="nhsuk-body">This is a local example. The appointment has not changed.</p></div><button class="nhsuk-button nhsuk-button--secondary nhsuk-u-margin-top-5" id="change" type="button">Change preference</button></section><p class="nhsuk-body-s">Native 10.6.1 controls with Arial. <a href="vendor/nhsuk-10.6.1/LICENSE.txt">Frontend licence</a>.</p></div></div></main><script type="module">import{initAll}from './vendor/nhsuk-10.6.1/nhsuk-frontend.min.js';initAll();const form=document.getElementById('form'),group=document.getElementById('group'),fs=group.querySelector('fieldset');form.addEventListener('submit',e=>{e.preventDefault();document.getElementById('error')?.remove();group.classList.remove('nhsuk-form-group--error');fs.setAttribute('aria-describedby','contact-hint');const value=form.querySelector(':checked')?.value;if(!value){group.classList.add('nhsuk-form-group--error');const p=document.createElement('p');p.id='error';p.className='nhsuk-error-message';p.tabIndex=-1;p.textContent='Select how you would prefer to attend';fs.querySelector('.nhsuk-radios').before(p);fs.setAttribute('aria-describedby','contact-hint error');p.focus();return}document.getElementById('selected').textContent='Selected method: '+(value==='telephone'?'Telephone':'In person');document.getElementById('choice').hidden=true;document.getElementById('review').hidden=false;document.getElementById('review-title').focus()});document.getElementById('change').addEventListener('click',()=>{document.getElementById('review').hidden=true;document.getElementById('choice').hidden=false;form.querySelector(':checked').focus()});</script></body></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
NHS Designsystem Einrichtung des Agenten
Ausgangspunkt für die Implementierung
Legen Sie Shell-Befehle und HTML jeweils in den dafür vorgesehenen Dateien ab. Arial ist eine ausdrückliche Überschreibung für die unabhängige Vorschau; NHS-Organisationen sollten sich nach ihrer tatsächlichen Schriftlizenz und ihren Markenanforderungen richten. Das vollständige ZIP-Archiv mit dem funktionierenden Beispiel unter „Quellen“ enthält außerdem die genauen Vorschau-Abhängigkeiten und das vollständige Dokument. Entpacken Sie es, führen Sie in diesem Verzeichnis python3 -m http.server 8080 aus und öffnen Sie anschließend http://localhost:8080/nhs.html. Öffnen Sie Beispiele mit Modulen nicht über file://.
sh / html
npm install [email protected]
mkdir -p public/assets
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.css public/assets/
cp node_modules/nhsuk-frontend/dist/nhsuk/nhsuk-frontend.min.js public/assets/
<link rel="stylesheet" href="/assets/nhsuk-frontend.min.css">
<style>body, body *, body *::before, body *::after { font-family: Arial, sans-serif !important; }</style>
<script type="module">
import { initAll } from '/assets/nhsuk-frontend.min.js';
initAll();
</script>
Ein Prompt für dein Projekt
Agenten-Prompt
Erstellen Sie mit NHS.UK Frontend 10.6.1 eine unabhängige Frage zur bevorzugten Art der Teilnahme an einem Termin. Verwenden Sie eine Fieldset- und Legend-Struktur für sich gegenseitig ausschließende Teilnahmemethoden, zugehörige Radio-Hinweise und das native Details-Element für optionale Hilfe. Frage und wichtige Hinweise müssen sichtbar bleiben. Zeigen Sie bei einer unbeantworteten Überprüfung eine verlinkte Fehlerübersicht und einen Inline-Fehler an; erhalten Sie die ausgewählte Methode, wenn man von der lokalen Überprüfung zurückkehrt. Laden Sie das passende CSS und module initAll sowie die ausdrücklich dokumentierte Arial-Überschreibung für die Studie. Fügen Sie weder eine Terminsuche noch tatsächliche Änderungen an Buchungen, klinische Beratung oder eine Behauptung der Zugehörigkeit zum NHS hinzu.
05
NHS Designsystem Quellen und Geltungsbereich
Unabhängige Studie zur bevorzugten Art der Teilnahme an einem Termin mit NHS.UK frontend 10.6.1. Kein NHS-Logo, keine lizenzierte Schrift Frutiger, keine echte Buchung, keine klinischen Anweisungen und keine implizite Befürwortung.
