Det Fælles Designsystem-Designsystem.

Theme und Implementierungsumfang des Designsystems Det Fælles Designsystem DKFDS

Wählen Sie bewusst Borger.dk oder Virk

Det Fælles Designsystem stellt separate Stylesheets für Borger.dk und Virk bereit. Dieses Beispiel setzt dkfds 11.3.0 fest und verwendet das Borger.dk-Stylesheet. Dadurch erhält es die charakteristischen grünen primären Steuerelemente und den IBM Plex Sans-Text. Es ändert nicht einfach nur die Farbe eines Buttons und gibt das als vollständigen Theme-Wechsel aus. Ein anderes Theme sollte als bewusste Implementierungsentscheidung geladen werden.

Sortierung nicht der Bibliothek zuschreiben

Die veröffentlichte Tabellenrichtlinie stellt Tabellen-Markup und -Formatierung bereit, überlässt das Verhalten für Sortierung und Suche jedoch ausdrücklich der Anwendung. Die Vorschau enthält eine vollständige, eigenständige Implementierung beider Funktionen. Dieser Unterschied ist wichtig: Der Import von DKFDS JavaScript allein macht nicht aus jeder beliebigen Tabelle eine durchsuchbare, sortierbare Datenansicht.

Sass-Werte und grundlegender Rhythmus des Designsystems Det Fælles Designsystem

Quellcode-Maps als Quellcode-Maps lesen

Die Referenz enthält tatsächliche Sass-Werte und keine erfundenen --token-Namen. Für die Abstands-Map gilt eine Basis von 8px; Schlüssel wie 305 stehen für 12px und 405 für 20px. Entwickler müssen den Helper der Bibliothek oder die entsprechenden Utility-Konventionen verwenden, statt diese Zahlen als Pixelwerte zu behandeln. Die Parametertabelle veranschaulicht die Zuordnung.

Die Konvention für die Root-Schriftgröße beachten

Der Standardwert für das Root-Element beträgt 62.5 % und berücksichtigt die Schriftpräferenz des Browsers. Die Quellcode-Map für Schriftgrößen enthält daher 1.6rem für die übliche kleine Schrift- beziehungsweise Textgröße bei der gängigen Browser-Standardschriftgröße. Wird ein rem-Wert in eine Umgebung mit einer anderen Root-Schriftgröße übernommen, kann das Ergebnis deutlich abweichen. Im Beispiel wird das tatsächliche Stylesheet geladen, damit Typografie und Abstände konsistent bleiben.

Semantischer Tabellenaufbau des Designsystems Det Fælles Designsystem

Beschriftung und eindeutige Spaltenrollen verwenden

Der Ressourcenvergleich enthält eine Tabellenbeschriftung, Spaltenüberschriften und gewöhnliche Datenzellen. Titel, Formate, Minutenangaben und Verwendungszwecke gehören in separate Spalten, damit Nutzer diese Merkmale vergleichen können. Die Lesezeiten sind geschätzte Beispielwerte und keine gemessenen Zugriffszahlen oder Leistungskennzahlen. Die Tabellenbeschriftung macht dies deutlich, ohne den Tabellenaufbau zu verändern.

• Eine aussagekräftige Tabellenbeschriftung und Spaltenüberschriften bereitstellen.
• Numerische Daten im Anwendungsmodell als Zahlen speichern.
• Den fokussierbaren Scrollbereich auf schmalen Bildschirmen beschriften.

Auf Mobilgeräten innerhalb der Tabelle scrollen

Die sortierbare Tabelle befindet sich in einem fokussierbaren, responsiven Scrollbereich. Die Mindestbreite sorgt für gut lesbare Spalten, während die äußere Seite innerhalb des Ansichtsfensters bleibt. Das Beispiel wandelt die sortierbare Tabelle bei geringer Bildschirmbreite nicht in thematisch unverbundene Karten um, da dies eine andere Navigation und eine andere Vereinbarung für Sortiersteuerelemente erfordern würde. Nutzer können den Scrollbereich mit der Tastatur fokussieren.

Sortierzustand und numerischer Vergleich im Designsystem Det Fælles Designsystem

Nur eine aktive Sortierung führen

Die Spalte „Titel“ wird zunächst aufsteigend sortiert. Wird dieselbe Spaltenüberschrift aktiviert, kehrt sich die Sortierreihenfolge um; bei Auswahl der Spalte „Minuten“ beginnt die Sortierung aufsteigend. Nur die aktive Spaltenüberschrift erhält aria-sort, und die verborgene Anweisung jedes Buttons beschreibt die nächste Aktion. Der sichtbare Pfeil gibt denselben Zustand wieder und ist keine unabhängige Dekoration.

Zahlen numerisch vergleichen

Abgesendete Suche und Wiederherstellung bei leeren Ergebnissen im Designsystem Det Fælles Designsystem

Suchanfrage erst nach dem Absenden anwenden

Beim Absenden des Formulars wird in allen angezeigten Merkmalen gesucht, auch wenn die Eingabetaste gedrückt wird. Allein durch die Eingabe wird die Tabelle nicht vor den Lesenden ausgetauscht. Die Statusmeldung nennt die Anzahl der sichtbaren Einträge und die aktuelle Sortierung, während die Suchanfrage im Feld erhalten bleibt. Das entspricht dem für dieses Beispiel gewählten Modell einer Suche, die erst nach dem Absenden ausgeführt wird.

Suchanfrage zurücksetzen, ohne die Sortierung zu verlieren

Bei einer Suchanfrage ohne Treffer wird eine Meldung zur Wiederherstellung angezeigt. Durch das Zurücksetzen werden alle Zeilen wiederhergestellt und das Suchfeld fokussiert; die ausgewählte Sortierspalte und Sortierrichtung bleiben erhalten. Suche und Sortierung werden somit als getrennte Zustandsvariablen behandelt. Es gibt keinen künstlichen Ladezustand, da der vollständige Datensatz mit fünf Zeilen bereits lokal vorliegt.

Vollständige Integration des Designsystems Det Fælles Designsystem

Assets der Distribution mit unveränderten Pfaden laden

Die Export-Map des Pakets 11.3.0 stellt den Eintrag JavaScript bereit, nicht beliebige tiefe Importe wie CSS. Beim Setup wird die Distribution nach public/dkfds kopiert und das Stylesheet über index.html eingebunden, sodass die relativen Pfade zu Schriftarten und Bildern erhalten bleiben. Speichern Sie die bereitgestellten Dateien main.js und denmark.css neben dieser Grundstruktur. Die lokale Vorschau bindet dieselben Assets ein und ermöglicht so eine zuverlässige Prüfung.

1. Installieren Sie dkfds 11.3.0 und kopieren Sie die Distribution nach public/dkfds.
2. Verwenden Sie die bereitgestellte Grundstruktur HTML, um das Borger.dk-Stylesheet zu laden.
3. Speichern Sie den vollständigen Eintrag und CSS und starten Sie anschließend die lokale App.
4. Prüfen Sie die numerische Sortierung, die Suche nach dem Absenden, das Zurücksetzen und das interne Scrollen auf Mobilgeräten.

Den gesamten Vergleichsablauf prüfen

Sortieren Sie die Minuten in beide Richtungen, senden Sie eine Suchanfrage ohne Treffer ab und setzen Sie die Suche zurück. Suchen Sie nach „Template“ und prüfen Sie, ob nur die beiden Vorlagenzeilen angezeigt werden und die aktuelle Sortierung erhalten bleibt. Bei Smartphone-Breite können Sie innerhalb der Tabelle scrollen und prüfen, ob die Seite selbst nicht überläuft. Bei der Prüfung wird außerdem bestätigt, dass alle mitgelieferten Assets geladen werden und keine Browserfehler auftreten.

Komponentenbeispiele des Designsystems Det Fælles Designsystem

// index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution.
import './denmark.css';
const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`<main><p class="eyebrow">DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY</p><h1>Find a planning resource</h1><p class="lead">Compare five authored resources. Search the full table or sort by title and estimated reading time.</p><form id="search-form"><label class="form-label" for="search">Search sample resources</label><div class="search-controls"><input class="form-input" id="search" type="search"><button class="button button-primary" type="submit">Search</button><button class="button button-secondary" id="reset" type="button">Reset</button></div></form><p id="count" role="status"></p><div class="table--responsive-scroll" tabindex="0" role="region" aria-label="Resource comparison table"><table class="table" id="resource-table"><caption>Original resource comparison; reading times are sample estimates</caption><thead><tr><th scope="col" id="name-head" aria-sort="ascending"><button class="button button-unstyled sort" data-key="name">Resource title <span class="arrow" aria-hidden="true">↑</span><span class="sr-only"> — sort descending</span></button></th><th scope="col">Format</th><th scope="col" id="minutes-head"><button class="button button-unstyled sort" data-key="minutes">Minutes <span class="arrow" aria-hidden="true">↕</span><span class="sr-only"> — sort ascending</span></button></th><th scope="col">Purpose</th></tr></thead><tbody id="rows"></tbody></table></div><section id="empty" hidden><h2>No matching resource</h2><p>Try a shorter word, a format such as Template, or reset the search.</p></section><aside><h2>About this table</h2><p>The Borger.dk theme and table styling are from DKFDS 11.3.0. Search and sorting are complete original JavaScript: the published table component does not implement them for you.</p><ul><li>Search is applied when you submit the form.</li><li>A selected column always has an active sort order.</li><li>On a narrow screen, scroll the table without moving the whole page.</li></ul></aside></main>`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render();

body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}}

@media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Planning resource comparison</title>
<link rel="stylesheet" href="/dkfds/css/dkfds-borgerdk.css">
</head>
<body><div id="root"></div><script type="module" src="/src/main.js"></script></body>
</html>