# Sistema di progettazione Det Fælles Designsystem ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Det Fælles Designsystem Confronta cinque risorse di pianificazione originali, inverti l’ordine e recupera da una ricerca senza risultati. ## Riferimento di progettazione del sistema di progettazione sistema di design Det Fælles Designsystem Tema DKFDS 11.3.0 Borger.dk effettivo, mappa delle spaziature, mappa tipografica e variabili di focus. I nomi mostrati sono riferimenti al codice sorgente Sass. ### Tema Borger.dk e focus | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | $borger-primary | #44831E | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $borger-primary-dark | #3C5C22 | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $borger-primary-darker | #233614 | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $header-portal-background-color | #f1f1f1 | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $theme-focus-width | 3px | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $theme-focus-offset | 1px | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $theme-focus-style | solid | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $typography-text-max-width | 66ch | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | Configurazione Sass effettiva della versione 11.3.0; questi nomi sono variabili del sorgente, non proprietà personalizzate CSS. | ### Chiavi della mappa delle spaziature | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | 0 | 0px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 1 | 2px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 2 | 4px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 3 | 8px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 305 | 12px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 4 | 16px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 405 | 20px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 5 | 24px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 505 | 28px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 6 | 32px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 7 | 40px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | | 8 | 48px | Mappa $spacers pubblicata. Le chiavi non sequenziali, come 305 e 405, corrispondono a 12px e 20px; non interpretare la chiave come una dimensione in pixel. | ### Mappa delle dimensioni dei caratteri | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | 2xs | 1.2rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | xs | 1.4rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | sm | 1.6rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | md | 1.8rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | lg | 2.0rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | xl | 2.1rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | 2xl | 2.2rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | 3xl | 2.4rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | 4xl | 2.8rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | 5xl | 3.2rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | 6xl | 4.0rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | | 7xl | 4.8rem | Voce $fds-font-sizes pubblicata. La radice predefinita è 62.5% e rispetta le preferenze del browser per i caratteri; con l’impostazione predefinita del browser a 16px, 1.6rem corrisponde a 16px. | ## Guida completa al sistema di progettazione sistema di design Det Fælles Designsystem Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## 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 I minuti sono dati numerici e vengono ordinati tramite sottrazione. I titoli usano localeCompare. Ordinare alfabeticamente stringhe numeriche produrrebbe risultati fuorvianti quando i valori aumentano. Gli oggetti riga originali restano la fonte di verità e il rendering usa textContent, senza interpretare il contenuto delle righe come markup. ## 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 ### main.js — comportamento completo del confronto Dati originali completi, ordinamento numerico e testuale, filtro all’invio e reimpostazione. ``` // 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=`

DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY

Find a planning resource

Compare five authored resources. Search the full table or sort by title and estimated reading time.

Original resource comparison; reading times are sample estimates
FormatPurpose
`;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(); ``` Riferimento del codice - L’ordinamento e la ricerca sono codice originale dell’applicazione, come richiesto dai limiti di integrazione delle tabelle pubblicati. ### denmark.css — composizione originale della pagina Controlli di ricerca responsive e area di scorrimento della tabella attivabile da tastiera. ``` 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}} ``` Riferimento del codice - Sui dispositivi con schermo stretto, la tabella mantiene la disposizione delle colonne all’interno di un’area di scorrimento. ### index.html — guscio completo per le risorse della distribuzione Carica il foglio di stile pubblicato mantenendo i percorsi relativi delle risorse. ``` Planning resource comparison
``` Riferimento del codice - Sostituisci l’index.html principale di Vite con questo guscio. ## Configurazione dell’agente del sistema di progettazione sistema di design Det Fælles Designsystem ### Punto di partenza per l’implementazione Il foglio di stile e i caratteri ufficiali vengono eseguiti localmente. L’applicazione gestisce l’ordinamento e il filtraggio; per gli stili statici della tabella non è necessaria una chiamata a DKFDS.init. ``` npm create vite@latest dkfds-table -- --template vanilla cd dkfds-table npm install npm install dkfds@11.3.0 mkdir -p public/dkfds cp -R node_modules/dkfds/dist/. public/dkfds/ # Replace index.html, src/main.js and src/denmark.css with the supplied examples. npm run dev ``` ### Un prompt per il tuo progetto ``` Realizza il confronto delle risorse DKFDS usando la distribuzione Borger.dk effettiva della versione 11.3.0 e il relativo contesto tipografico. Implementa l’ordinamento originale completo, numerico e per titolo, una sola intestazione aria-sort attiva, la ricerca inviata, il conteggio dei risultati e la reimpostazione che conserva l’ordinamento. Mantieni la tabella scorrevole orizzontalmente nella propria area accessibile da tastiera. ``` ## Fonti e ambito del sistema di progettazione sistema di design Det Fælles Designsystem Un confronto originale di OpenDesign con stili e caratteri Borger.dk di DKFDS 11.3.0. Ordinamento, ricerca e dati di esempio sono codice originale completo dell’applicazione, non funzionalità integrate nelle tabelle DKFDS. - Indicazioni per la tabella Responsabilità relative a markup, scorrimento, ordinamento e ricerca. - Pacchetto e temi Foglio di stile di distribuzione e limiti dell’inizializzazione. - Personalizzazione del tema Configurazione del tema a livello di sorgente. - Sorgente versionata Mappe Sass, valori del tema e licenze degli asset. ## Risorse correlate al sistema di design Det Fælles Designsystem ### sistema di design .italia Implementa una sequenza di servizio leggibile con la tipografia reale di Bootstrap Italia, la struttura responsive di Stepper e uno stato locale del modulo ripristinabile. ### Designsystemet Esplora i ruoli effettivi del tema di Designsystemet, le modalità di dimensionamento e il comportamento nativo dei campi con un editor completo per le descrizioni delle attività, dotato di feedback sul numero di caratteri e di stato di presentazione conservato. ### DSFR Esamina la tipografia, la griglia e l’accordion concreti del sistema dello Stato francese API nel suo contesto istituzionale. Confronta il comportamento dei pannelli informativi collegati e indipendenti in un esempio didattico chiaramente neutrale. - [Riferimento per l’implementazione](https://designsystem.dk/komponenter/tables/) - [Fonte](https://github.com/detfaellesdesignsystem/dkfds-components) - [Riferimento del codice](https://designsystem.dk/komponenter/tables/) - [Riferimento del codice](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Indicazioni per la tabella Responsabilità relative a markup, scorrimento, ordinamento e ricerca.](https://designsystem.dk/komponenter/tables/) - [Pacchetto e temi Foglio di stile di distribuzione e limiti dell’inizializzazione.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Personalizzazione del tema Configurazione del tema a livello di sorgente.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [Sorgente versionata Mappe Sass, valori del tema e licenze degli asset.](https://github.com/detfaellesdesignsystem/dkfds-components)