Sistema di progettazione Det Fælles Designsystem.

Tema DKFDS e ambito di implementazione del sistema di progettazione sistema di design Det Fælles Designsystem

Scegliere Borger.dk o Virk consapevolmente

Det Fælles Designsystem distribuisce fogli di stile distinti per Borger.dk e Virk. Questo esempio fissa dkfds alla versione 11.3.0 e usa il foglio di stile Borger.dk, ottenendo i caratteristici controlli primari verdi e il testo in IBM Plex Sans. Non si limita a cambiare il colore di un pulsante definendolo un cambio di tema completo. Un tema diverso va caricato come scelta di implementazione consapevole.

Non attribuire l’ordinamento originale alla libreria

Le indicazioni pubblicate per le tabelle forniscono markup e stili, ma lasciano esplicitamente all’applicazione la gestione dell’ordinamento e della ricerca. L’anteprima include un’implementazione originale completa di entrambi. È una distinzione importante: importare soltanto DKFDS JavaScript non trasforma una tabella qualsiasi in una vista dati con ricerca e ordinamento.

Valori Sass e ritmo di base del sistema di progettazione sistema di design Det Fælles Designsystem

Leggere le mappe del sorgente come mappe del sorgente

Il riferimento riporta valori Sass effettivi, non nomi --token inventati. La mappa delle spaziature usa una base di 8px, con chiavi come 305 per 12px e 405 per 20px. Gli sviluppatori devono usare l’helper della libreria o le convenzioni delle utility corrispondenti, anziché trattare questi numeri come valori letterali in pixel. La tabella dei parametri rende visibile la corrispondenza.

Rispettare la convenzione della dimensione del carattere radice

La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri. La mappa delle dimensioni dei caratteri del sorgente include quindi 1.6rem per il normale livello piccolo/corpo del testo, con l’impostazione predefinita abituale del browser. Copiare un valore rem in un ambiente con una dimensione della radice diversa può modificare sensibilmente il risultato. L’esempio carica il foglio di stile effettivo, mantenendo coerente il contesto tipografico e delle spaziature.

Struttura semantica della tabella nel sistema di progettazione sistema di design Det Fælles Designsystem

Usare una didascalia e ruoli di colonna chiari

Il confronto delle risorse include una didascalia, intestazioni di colonna e normali celle di dati. Titoli, formati, minuti e finalità sono disposti in colonne separate perché gli utenti possano confrontare questi attributi. I tempi di lettura sono stime di esempio inserite manualmente, non statistiche misurate sul traffico o sulle prestazioni. La didascalia chiarisce questa distinzione senza modificare la struttura della tabella.

• Fornire una didascalia utile e intestazioni di colonna.
• Mantenere i dati numerici come numeri nel modello dell’applicazione.
• Assegnare un’etichetta all’area di scorrimento attivabile da tastiera sugli schermi stretti.

Mantenere lo scorrimento mobile all’interno della tabella

La tabella ordinabile si trova in un’area responsive con scorrimento attivabile da tastiera. La larghezza minima mantiene leggibili le colonne, mentre la pagina esterna resta entro i limiti della finestra. Nell’esempio, la tabella ordinabile non viene trasformata in schede non correlate sugli schermi stretti: ciò richiederebbe un altro contratto di navigazione e dei controlli di ordinamento. Gli utenti che usano la tastiera possono attivare l’area di scorrimento.

Stato di ordinamento e confronto numerico nel sistema di progettazione sistema di design Det Fælles Designsystem

Mantenere un solo ordinamento attivo

La colonna dei titoli inizia in ordine crescente. Attivando di nuovo la stessa intestazione, l’ordine si inverte; selezionando la colonna dei minuti, l’ordinamento inizia in ordine crescente. Solo l’intestazione attiva riceve aria-sort e l’istruzione nascosta di ciascun pulsante descrive l’azione successiva. La freccia visibile rispecchia lo stesso stato, senza essere un elemento decorativo indipendente.

Confrontare i numeri come numeri

Ricerca inviata e gestione dei risultati vuoti nel sistema di progettazione sistema di design Det Fælles Designsystem

Applicare la ricerca all’invio

Al momento dell’invio del modulo, la ricerca filtra tutte le caratteristiche visualizzate, anche premendo Invio. La sola digitazione non sostituisce la tabella mentre l’utente la consulta. Lo stato comunica il numero di risultati visibili e l’ordinamento corrente, mentre la ricerca resta nel campo. L’esempio segue questo modello di ricerca inviata.

Reimpostare la ricerca senza perdere l’ordinamento

Una ricerca senza corrispondenze mostra un messaggio che permette di ripristinare i risultati. La reimpostazione ripristina tutte le righe e sposta il focus sul campo di ricerca, mantenendo la colonna e la direzione di ordinamento selezionate. Ricerca e ordinamento restano quindi variabili di stato separate. Non è previsto uno stato di caricamento artificiale, poiché i cinque elementi del set di dati sono già disponibili localmente.

Integrazione completa e funzionante del sistema di progettazione sistema di design Det Fælles Designsystem

Caricare le risorse della distribuzione mantenendo intatti i percorsi

La mappa delle esportazioni del pacchetto 11.3.0 espone la voce JavaScript, non importazioni profonde arbitrarie di CSS. La configurazione copia la distribuzione in public/dkfds e collega il foglio di stile da index.html, mantenendo i percorsi relativi dei caratteri e delle immagini. Salvare main.js e denmark.css forniti accanto a quel guscio. L’anteprima locale include le stesse risorse per agevolare un’ispezione affidabile.

1. Installa dkfds 11.3.0 e copia la sua distribuzione in public/dkfds.
2. Usa il guscio HTML fornito per caricare il foglio di stile Borger.dk.
3. Salva la voce completa e CSS, quindi avvia l’applicazione locale.
4. Verifica l’ordinamento numerico, la ricerca inviata, la reimpostazione e lo scorrimento interno su dispositivi mobili.

Verificare l’intero flusso di confronto

Ordina i minuti in entrambe le direzioni, invia una ricerca senza risultati e reimposta i dati. Cerca Template e verifica che rimangano solo le due righe relative ai modelli, mantenendo l’ordinamento corrente. Alla larghezza di un telefono, scorri la tabella al suo interno e verifica che la pagina non abbia scorrimento orizzontale. Il controllo verifica anche che tutte le risorse incluse vengano caricate e che non si verifichino errori nel browser.

Esempi di componenti del sistema di progettazione sistema di design 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>