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.
Comportamento nativo di ds-field di Designsystemet 1.23.0, CSS e tema predefinito con font Inter locali. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di progettazione sistema di design Designsystemet
Esportazioni del tema predefinito e implementazione nativa di ds-field in @digdir/designsystemet-css/web 1.23.0. I valori della modalità chiara sono indicati esplicitamente nelle righe dei colori.
Ruoli di accento predefiniti per la modalità chiara
Comportamento, CSS e pacchetti del tema del sistema di progettazione sistema di design Designsystemet
Carica le tre parti nell’ordine corretto
Designsystemet separa il comportamento indipendente dal framework, CSS dei componenti e i valori del tema. Questo esempio blocca designsystemet-web e designsystemet-css alla versione 1.23.0, importa CSS e poi il tema predefinito, quindi registra il comportamento una sola volta. Un campo stilizzato senza il relativo pacchetto di comportamento non corrisponde all’implementazione collegata ds-field mostrata qui.
Usa il contratto attuale di HTML senza framework
L’esempio usa ds-field attorno ai normali elementi input, textarea e select con classi ds-input. In questo modo si mantengono i controlli nativi del modulo e il pacchetto collega etichette e descrizioni. Non copia un’implementazione precedente del campo basata solo su React API. Il sorgente completo include le importazioni corrette dei pacchetti e la logica di revisione dell’applicazione originale.
Schema di colori e modalità dimensionali del sistema di progettazione sistema di design Designsystemet
Cambia l’aspetto tramite attributi data
La pagina imposta data-color-scheme su light o dark nell’elemento root. Il tema fornisce i colori semantici corrispondenti, mentre i valori del modulo restano invariati. La tabella dei parametri riporta esplicitamente i valori predefiniti per la modalità chiara; non afferma che gli stessi colori esadecimali valgano anche nella modalità scura. Un pulsante secondario per l’aspetto descrive l’azione successiva.
Fai in modo che la modalità dimensionale influisca sull’intero sistema
Il controllo delle dimensioni di lettura cambia data-size tra sm, md e lg. In questo modo cambia la modalità dimensionale del tema, invece di ingrandire solo il titolo. I fattori delle modalità pubblicate sono 1, 1.125 e 1.3125; partecipano alle formule dei token e non sono un’istruzione universale per impostare quei valori in pixel a un controllo. L’esempio verifica la modalità grande sia su uno schermo di telefono sia su desktop.
Inter e tipografia semantica del sistema di progettazione sistema di design Designsystemet
Includi i pesi previsti
L’anteprima include Inter 400, 500 e 600 e abilita la funzione del font documentata cv05 per la forma della l minuscola. La pagina usa le classi native per titoli e paragrafi, così che il peso del font e l’interlinea seguano il tema. Un’annotazione fissa di 14px è una nota di supporto definita ad hoc, chiaramente al di fuori della scala interattiva principale.
Mantieni i contenuti di supporto accanto al relativo controllo
Il suggerimento del titolo spiega lo scopo dell’etichetta; quello del risultato descrive il tipo di contenuto atteso. Restano accanto ai rispettivi controlli e sono collegati tramite ds-field. Le indicazioni di supporto si trovano in una scheda separata, posizionata dopo il modulo sugli schermi stretti. Per mostrare le istruzioni, il layout non dipende dall’hover.
Relazioni automatiche e feedback sui caratteri del sistema di progettazione sistema di design Designsystemet
Lascia che ds-field colleghi un solo controllo
Ogni ds-field contiene un controllo simile a un input, la relativa etichetta ed eventuali descrizioni data-field. Il pacchetto assegna gli ID e crea le relazioni tra etichette e descrizioni. Raggruppare controlli non correlati nello stesso ds-field renderebbe ambiguo questo contratto automatico. Per un gruppo, usa un fieldset invece di presumere che il wrapper sia un contenitore generico per moduli.
Inserisci un solo controllo simile a un input in ogni ds-field.
Usa le descrizioni data-field per i contenuti di supporto correlati.
Lascia che l’observer nativo gestisca ID e relazioni aria-describedby.
Scopri cosa misura il contatore
Convalida dell’applicazione e stato di revisione del sistema di progettazione sistema di design Designsystemet
Convalida separatamente i requisiti del contenuto
L’applicazione richiede un titolo e un risultato non vuoti e rifiuta un risultato più lungo del limite dell’esempio. Dopo aver mostrato un messaggio utile, porta il focus sul campo pertinente. Il contatore nativo spiega la lunghezza, mentre il gestore dell’invio applica la regola di revisione locale. L’attributo maxlength non tronca silenziosamente il testo incollato.
Conserva i dati quando cambi la presentazione
Una revisione completata mostra come testo il titolo e il risultato correnti. Modificare uno dei due campi cancella il risultato; cambiare aspetto o dimensioni lo mantiene, perché questi controlli non modificano il brief. Questa distinzione è intenzionale e verificata. Non viene inviato nulla a un servizio di gestione dei progetti e l’anteprima non dichiara mai che sia stata creata un’attività esterna.
Implementazione completa dei campi nativi del sistema di progettazione sistema di design Designsystemet
Riproduci l’esempio specifico della versione
Crea un progetto Vite vanilla, installa i due pacchetti Designsystemet bloccati e Inter, quindi salva il file di ingresso completo e digdir.css. Mantieni l’elemento root di mount. Il sorgente include la registrazione, l’ordine del tema, il markup del contatore, i controlli di presentazione e tutte le transizioni di convalida della revisione. L’anteprima locale usa lo stesso observer nativo dei campi, non un’imitazione disegnata a mano.
Importa una volta il comportamento, poi CSS dei componenti e il tema predefinito.
Carica Inter 400, 500 e 600 e salva il file di ingresso/CSS completo.
Prova il contatore oltre il limite e correggi il risultato.
Rivedi, cambia dimensioni e aspetto, quindi modifica il testo per cancellare il risultato.
Verifica il comportamento oltre il limite e il ripristino
Incolla 150 caratteri normali nel risultato e verifica che venga segnalato il superamento del limite di dieci caratteri. La revisione deve essere rifiutata. Sostituisci il testo con un risultato breve e completa la revisione, poi cambia la modalità scura e le dimensioni di lettura senza perdere il risultato. Modifica il titolo e verifica che la vecchia revisione venga cancellata. Controlla il focus visibile e il ritorno a capo a ogni larghezza del viewport.
Esempi di componenti del sistema di progettazione sistema di design Designsystemet
main.js — studio completo dei campi nativi e del tema
Editor completo, markup reale del contatore, controlli per aspetto e dimensioni e convalida locale della revisione.
javascript
import '@digdir/designsystemet-web';
import '@digdir/designsystemet-css';
import '@digdir/designsystemet-css/theme';
import '@fontsource/inter/latin-400.css';
import '@fontsource/inter/latin-500.css';
import '@fontsource/inter/latin-600.css';
import './digdir.css';
document.documentElement.dataset.colorScheme='light';document.documentElement.dataset.size='md';document.getElementById('root').innerHTML=`<main><header><div><p class="eyebrow">DESIGNSYSTEMET / NATIVE FIELD STUDY</p><h1 class="ds-heading" data-size="lg">Write a useful task brief</h1></div><button id="theme" class="ds-button" data-variant="secondary" aria-pressed="false">Dark appearance</button></header><p class="ds-paragraph lead">Describe one outcome clearly. The native field connects its label, hint and character feedback while the theme controls size and appearance.</p><div class="layout"><form id="brief-form" novalidate><ds-field class="ds-field"><label>Task title</label><input id="title" class="ds-input" type="text" value="Review the navigation"/><p data-field="description">Use a short label that identifies the work.</p></ds-field><ds-field class="ds-field"><label>Desired outcome</label><textarea id="outcome" class="ds-input" rows="4">Make the main sections easier to find without changing the accepted content.</textarea><p data-field="description">Describe the result, not a list of implementation instructions.</p><p data-field="counter" data-limit="140" data-over="%d characters over the sample limit" data-under="%d characters remaining"></p></ds-field><p id="error" class="ds-validation-message" hidden role="alert"></p><button class="ds-button" type="submit">Review brief</button></form><aside class="ds-card" data-color="neutral"><h2 class="ds-heading" data-size="sm">Reading size</h2><p class="ds-paragraph">The theme changes the complete size mode rather than scaling only a heading.</p><ds-field class="ds-field"><label for="size">Component size</label><select class="ds-input" id="size"><option value="sm">Small</option><option value="md" selected>Medium</option><option value="lg">Large</option></select></ds-field><h3 class="ds-heading" data-size="xs">A clear brief contains</h3><ul><li>One concrete outcome.</li><li>Constraints that must remain true.</li><li>A way to check the result.</li></ul><p class="small">Default theme and web behavior 1.23.0. Original local application; no task is created elsewhere.</p></aside></div><section id="review" class="ds-card" data-color="success" hidden tabindex="-1"><h2 class="ds-heading" data-size="sm">Local brief review</h2><h3 id="review-title" class="ds-heading" data-size="xs"></h3><p id="review-body" class="ds-paragraph"></p><p class="small">Editing a field clears this review. Appearance and reading size preserve it.</p></section></main>`;const $=id=>document.getElementById(id);function edit(){$('review').hidden=true;$('error').hidden=true}['title','outcome'].forEach(id=>$(id).addEventListener('input',edit));$('theme').addEventListener('click',()=>{const dark=document.documentElement.dataset.colorScheme!=='dark';document.documentElement.dataset.colorScheme=dark?'dark':'light';$('theme').setAttribute('aria-pressed',String(dark));$('theme').textContent=dark?'Light appearance':'Dark appearance'});$('size').addEventListener('change',e=>document.documentElement.dataset.size=e.target.value);$('brief-form').addEventListener('submit',e=>{e.preventDefault();let message='',focus='outcome';if(!$('title').value.trim()){message='Enter a task title.';focus='title'}else if(!$('outcome').value.trim())message='Describe the desired outcome.';else if($('outcome').value.length>140)message='Shorten the outcome to 140 characters or fewer.';if(message){$('error').textContent=message;$('error').hidden=false;$(focus).focus();return}$('review-title').textContent=$('title').value.trim();$('review-body').textContent=$('outcome').value.trim();$('review').hidden=false;$('review').focus()});
Le modifiche al tema e alle dimensioni mantengono i valori; solo le modifiche ai contenuti invalidano la revisione.
04
Configurazione dell’agente del sistema di design Designsystemet
Punto di partenza per l’implementazione
Le relazioni native tra etichette, lo stato del contatore, il recupero dagli errori di convalida e le modifiche delle dimensioni nei temi chiaro e scuro sono stati verificati in un browser reale.
sh
npm create vite@latest ds-brief -- --template vanilla
cd ds-brief
npm install
npm install @digdir/[email protected] @digdir/[email protected] @fontsource/inter
# Replace src/main.js and add src/digdir.css. Keep <div id="root"></div>.
npm run dev
Un prompt per il tuo progetto
Prompt per l’agente
Crea l’editor del brief seguendo, nell’ordine corretto, il comportamento di Designsystemet 1.23.0/CSS/tema predefinito. Usa ds-field con un solo controllo nativo, gli effettivi attributi del contatore data-field e i pesi di Inter. Mantieni la revisione durante le modifiche all’aspetto e alle dimensioni, cancellala dopo le modifiche ai contenuti e applica la regola originale di 140 caratteri senza troncare il testo incollato.
05
Fonti e ambito del sistema di design Designsystemet
Un editor locale realizzato da OpenDesign con Designsystemet CSS e il comportamento web 1.23.0. Il tema predefinito e l’osservatore dei campi sono nativi; il contenuto del brief, il limite di 140 caratteri e il flusso di revisione sono originali.
