# Sistema di design NL ## Sistema di design NL Anteprima dell’interfaccia Cambia tra i temi originali, modifica la sede della raccolta e salvala oppure annulla senza cambiare il record. ## Sistema di design NL Riferimento di progettazione Composizione concreta di un contributore: @utrecht/component-library-css 9.0.15. I nomi dei token pubblici e le classi sono API della libreria consultabili; i valori numerici e i colori indicati come «esempio» sono impostazioni originali dell’applicazione, non una specifica universale di NL Design System. ### Architettura | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | Component implementation | Utrecht CSS 9.0.15 | Un contributore selezionato, non l’unica implementazione di NL Design System. | | Theme boundary | Wrapper-scoped CSS custom properties | Lo stesso markup semantico supporta identità diverse. | | Source design tokens | Design Tokens JSON standard | Le organizzazioni descrivono i propri stili grafici per poterli riutilizzare. | ### Token reale del pulsante API | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | --utrecht-button-min-block-size | 48px in example; 44px library fallback | Dimensione esplicita dell’area interattiva. | | --utrecht-button-border-radius | 4px / 8px in example themes | Geometria gestita dall’applicazione. | | --utrecht-button-primary-action-background-color | #005a5b / #57328c in example themes | Colori originali delle azioni; testo bianco. | | --utrecht-button-font-size | 1rem in example | Ruolo del testo del componente. | | --utrecht-focus-outline-width | 3px in example | Configurazione pubblica dell’anello di focus. | ### API Data List | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | .utrecht-data-list + .utrecht-data-list--rows | dl root | Valori semantici denominati. | | .utrecht-data-list__item | Key/value wrapper | Riga della griglia responsive. | | --utrecht-data-list-rows-column-min-inline-size | 12ch in example | Larghezza minima della colonna scelta per le etichette della ricevuta. | | --utrecht-data-list-rows-column-inline-size | 45% in example | Due colonne quando lo spazio lo consente. | | --utrecht-data-list-rows-gap | 24px in example | Spazio tra chiave e valore. | ## Sistema di design NL Guida completa 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. ## Sistema di design NL Scegli una composizione ### Un ecosistema, non un unico tema > NL Design System supporta esplicitamente la combinazione dei contributi di più organizzazioni e descrive lo stile caratteristico di ciascuna tramite design token. L’unità pratica di adozione è quindi un’implementazione di componenti selezionata insieme a un tema selezionato. Questa pagina sceglie l’implementazione del contributore Utrecht CSS e un tema dimostrativo originale. Questa scelta non afferma che Utrecht sia l’implementazione canonica di ogni componente NL Design System. Offre al lettore un percorso riproducibile, senza inventare un font nazionale, un colore blu o una scala di spaziatura. Il pacchetto nativo CSS effettivo è @utrecht/component-library-css 9.0.15. Leggi la specifica di supporto ## Token pubblici dei componenti sistema di design NL ### Mantieni i valori dell’applicazione separati da CSS Il tema fornito imposta le proprietà personalizzate pubbliche --utrecht-* su un wrapper. Il pulsante usa questi valori, mentre la sua classe ne determina la struttura. Le variabili che iniziano con --_utrecht- sono calcoli interni nella versione di CSS esaminata; modificarle direttamente legherebbe l’applicazione ai dettagli di implementazione. Il turchese #005a5b e il viola #57328c dell’esempio sono colori originali dell’applicazione. Dimostrano come sostituire il marchio senza copiare l’identità di un comune. Entrambi usano testo bianco per le azioni e il colore al passaggio del puntatore è definito separatamente. Nessun colore viene descritto come valore ufficiale di un token NL Design System. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Riferimento del codice Leggi la specifica di supporto ## Tipografia e dimensioni di sistema di design NL ### Definisci le scelte di tema mancanti La demo definisce Arial, sans-serif a 18px con un’interlinea di 1.6 per la lettura dei documenti. Il primo tema usa un’intestazione da 32px e un raggio degli angoli dei pulsanti di 4px; il secondo mantiene la stessa dimensione leggibile del testo principale, con un raggio di 8px e un’intestazione con grazie. Le differenze tra i temi sono volutamente evidenti. Se il relativo token non è presente, il pulsante nativo usa una dimensione minima in direzione del blocco di 44px. Il nostro tema imposta 48px e padding espliciti in direzione del blocco e in quella in linea. È un vero CSS API con un valore scelto dall’applicazione, non una dimensione ipotizzata per l’intero ecosistema. Il layout usa una larghezza massima dei contenuti di 56rem e spaziature di 24px, definiti in questo esempio. Leggi la specifica di supporto ## Struttura dell’elenco di dati sistema di design NL ### Un elenco di definizioni per valori identificati La ricevuta usa un dl con .utrecht-data-list e il modificatore .utrecht-data-list--rows. Ogni .utrecht-data-list__item raggruppa una chiave dt e un valore dd. Il modificatore rows attiva la griglia adattiva, gli spazi tra le righe e i bordi; senza di esso, l’elenco di dati di base non abilita quel layout. HTML mantiene il proprio significato anche prima del caricamento di un tema. La ricevuta elenca un luogo di ritiro, un riferimento e l’articolo selezionato. Non si tratta di una tabella di record ripetuti: ogni chiave identifica un attributo diverso della stessa richiesta. Sugli schermi stretti, chiave e valore si dispongono uno sotto l’altro. L’applicazione imposta i token delle righe affinché le etichette lunghe dei luoghi siano visibili per intero. - Usa dt per il nome dell’attributo e dd per il suo valore attuale. - Inserisci ogni coppia chiave/valore nel wrapper documentato per gli elementi. - Consenti agli identificativi e ai nomi di luogo lunghi di andare a capo, invece di allargare la pagina. Leggi la specifica di supporto ## Semantica delle azioni sistema di design NL ### La classe di un pulsante non definisce un flusso di lavoro .utrecht-button fornisce il componente di base, mentre .utrecht-button--primary-action seleziona il gruppo di token per l’aspetto primario. Per un’azione locale che non deve inviare il modulo circostante, l’elemento nativo ha comunque bisogno di type=button. L’elenco di dati rimane di sola lettura finché l’applicazione non apre un pannello di modifica. Il pulsante «Modifica il luogo di ritiro» della demo mostra un fieldset con pulsanti radio nativi. Il salvataggio aggiorna il valore nell’elenco di definizioni e comunica il nuovo luogo tramite un’area di stato con annuncio non urgente. L’annullamento chiude il pannello senza modificare il valore salvato. Questi comportamenti sono gestiti dal codice dell’applicazione: la sola installazione di un pacchetto CSS non li implementa. Leggi la specifica di supporto ## Cambia tema in sicurezza sistema di design NL ### Cambia il wrapper, mantieni i dati Il selettore del tema modifica data-theme sul wrapper esterno. Le classi dei componenti, i valori del record e il pulsante radio selezionato restano invariati. È una dimostrazione concreta della separazione tra identità visiva e contenuti: la stessa ricevuta e la stessa interazione possono supportare identità visive diverse. Qui il cambio di tema è una dimostrazione a scopo di sviluppo, non un’impostazione che un servizio pubblico debba necessariamente offrire. In un servizio reale rivolto a più organizzazioni, scegli il tema tramite una configurazione attendibile dell’applicazione. I valori del tema non devono modificare i criteri di idoneità, la convalida o il significato di uno stato. 1. Carica una sola volta il pacchetto versionato di componenti CSS. 2. Applica i token pertinenti del tema a un elemento contenitore. 3. Esegui il rendering dello stesso markup semantico dei componenti all’interno di quel contenitore. 4. Verifica lo stato attivo, il ritorno a capo e i colori degli stati in ogni tema supportato. Leggi la specifica di supporto ## Accessibilità e maturità sistema di design NL ### Valuta il contributo selezionato Il modello di relay di NL Design System descrive come i contributi progrediscono verso standard condivisi. La presenza di un componente in un repository della community non garantisce, di per sé, che ogni composizione sia pronta per la produzione. Verifica l’implementazione selezionata, gli stati supportati e il livello di maturità attuale consultando la documentazione del componente. L’anteprima mantiene visibile una legenda per le scelte del luogo, annuncia il risultato salvato e, dopo la modifica, riporta lo stato attivo sul pulsante che l’ha avviata. Il cambio di tema non rimuove lo stato attivo. La schermata rimane utilizzabile con i controlli da tastiera nativi dei pulsanti radio e i contorni dello stato attivo dell’app; queste verifiche integrano i test del componente del contributore, ma non li sostituiscono. Leggi la specifica di supporto ## Installa sistema di design NL e gestisci il tema ### Integrazione con il solo CSS Installa il pacchetto verificato CSS e importa dist/index.css tramite un bundler compatibile con CSS, seguito dal foglio di stile del tema. Per l’elenco di dati e il pulsante usati qui, che usano solo CSS, non sono necessari né un provider React né un inizializzatore di componenti JavaScript. Lo script originale dell’applicazione gestisce modifica, salvataggio, annullamento e cambio del tema. Il codice sorgente dei componenti inclusi nel pacchetto è distribuito con licenza EUPL-1.2. Quando lo distribuisci, conserva le notifiche relative al codice sorgente e alla licenza; non dedurre da una licenza del codice il permesso di riutilizzare il logo di un comune. Questo esempio fornisce intenzionalmente temi originali e non include simboli comunali. Leggi la specifica di supporto ## Esempi di componenti del sistema di progettazione sistema di design NL ### Token del tema usati da un pulsante nativo Un tema completo per il pulsante selezionato. I valori sono originali; i nomi API provengono da Utrecht. ``` .example-theme { /* Original application values, not a national house style. */ --utrecht-document-font-family: Arial, sans-serif; --utrecht-button-font-size: 1rem; --utrecht-button-line-height: 1.5; --utrecht-button-font-weight: 700; --utrecht-button-border-radius: .25rem; --utrecht-button-min-block-size: 48px; --utrecht-button-padding-block-start: .75rem; --utrecht-button-padding-block-end: .75rem; --utrecht-button-padding-inline-start: 1.25rem; --utrecht-button-padding-inline-end: 1.25rem; --utrecht-button-primary-action-background-color: #005a5b; --utrecht-button-primary-action-color: #fff; --utrecht-button-primary-action-hover-background-color: #003f40; --utrecht-button-primary-action-hover-color: #fff; --utrecht-focus-outline-color: #111; --utrecht-focus-outline-width: 3px; --utrecht-focus-outline-offset: 3px; --utrecht-focus-outline-style: solid; } ``` Riferimento del codice ### Valori identificati e un pulsante per avviare la modifica dl/dt/dd semantici con classi dei componenti del contributore. ```
Collection location
North library desk
Reference
DEMO-2048
``` Riferimento del codice ### Esempio autonomo completo Il documento completo include layout, controlli e inizializzazione. Estrai l’archivio di esempio collegato per ottenere gli esatti asset vendor relativi, quindi avvialo tramite HTTP. ``` NL Design System composition
Community collection · Example

CONTRIBUTOR COMPONENTS + YOUR THEME

Review your collection details

This receipt uses Utrecht CSS components. Switching the theme changes public design tokens and preserves your choices.

Item
Community reading pack
Collection location
North library desk
Reference
DEMO-2048

Independent OpenDesign specimen. Utrecht CSS 9.0.15; original themes and fictional data. No municipal identity or external submission.
``` Riferimento del codice - Scarica l’esempio completo dalla sezione Fonti. Il README indica il comando esatto per avviarlo in locale. - Mantieni i percorsi vendor relativi a questo documento; l’archivio include tutti gli asset usati da questa anteprima. ## Configurazione dell’agente sistema di design NL ### Punto di partenza per l’implementazione L’anteprima autonoma carica localmente la stessa versione del pacchetto nativo CSS. I componenti pulsante/elenco di dati che usano solo CSS non richiedono un provider React. I valori originali del tema devono essere inclusi insieme alla libreria. Il file ZIP completo dell’esempio funzionante, disponibile in Sources, fornisce anche le dipendenze esatte dell’anteprima e il documento completo. Estrailo, esegui python3 -m http.server 8080 in quella directory, quindi apri http://localhost:8080/nl-design-system.html. Non aprire gli esempi basati su moduli tramite file://. ``` npm install @utrecht/component-library-css@9.0.15 # CSS-aware application entry: # import '@utrecht/component-library-css/dist/index.css'; # import './example-theme.css'; # Wrap the dl/button composition in
. # Add application event handlers for editing and theme selection. ``` ### Un prompt per il tuo progetto ``` Usa @utrecht/component-library-css 9.0.15 per un elenco di definizioni per la ricevuta e un pulsante primario. Fornisci un tema originale, limitato al wrapper, tramite i token pubblici --utrecht-* e lascia inalterate le variabili interne --_utrecht-*. Consenti di modificare il luogo tramite opzioni radio etichettate, con funzioni di salvataggio e annullamento, annuncio non urgente dell’aggiornamento e ripristino dello stato attivo. Mostra un secondo tema originale senza sostituire il markup dei componenti o perdere i dati. Specifica che tutti i valori numerici del tema sono scelte dell’applicazione. ``` ## Fonti e ambito sistema di design NL NL Design System è un ecosistema indipendente dai marchi. Questo esempio didattico seleziona l’implementazione di un contributore e due temi originali; non rivendica uno stile visivo nazionale e non usa l’identità di un comune. - Panoramica dell’ecosistema Risorse condivise per i servizi pubblici e contesto della community. - Introduzione per sviluppatori Componenti, temi delle organizzazioni e architettura dei design token. - Catalogo dei componenti Esplora i componenti documentati e i riferimenti disponibili. - Scarica l’esempio completo e funzionante ZIP con HTML completo, dipendenze locali CSS/JavaScript, licenze fornite e istruzioni esatte per l’avvio. Non è necessario alcun passaggio di compilazione. ## Risorse correlate sistema di design NL ### NSW sistema di design Esplora i token di design NSW, la tipografia Public Sans e le schede native accessibili da tastiera attraverso una guida completa al workshop con un elenco di letture locale e indipendente. ### ONS sistema di design Crea una risposta al sondaggio che non possa contraddirsi: caselle di controllo native ONS, risposte mutuamente esclusive, riferimenti precisi a tipi e colori e un flusso completo di revisione locale. ### Ontario sistema di design Crea una guida articolata in più sezioni in stile Ontario, con tipografia, spaziature e valori cromatici pubblicati, comportamento nativo dell’accordion e codice sorgente completo e corrispondente alla versione. - [Riferimento per l’implementazione](https://github.com/nl-design-system/utrecht) - [Fonte](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Fonte](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Fonte](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Leggi la specifica di supporto](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Riferimento del codice](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Leggi la specifica di supporto](https://github.com/nl-design-system/utrecht/tree/main/packages/button) - [Leggi la specifica di supporto](https://github.com/nl-design-system/utrecht/tree/main/packages/component-library-css) - [Leggi la specifica di supporto](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Leggi la specifica di supporto](https://www.nldesignsystem.nl/handboek/estafettemodel/) - [Riferimento del codice](https://github.com/nl-design-system/utrecht/tree/main/packages/data-list) - [Riferimento del codice](https://github.com/nl-design-system/utrecht) - [Panoramica dell’ecosistema Risorse condivise per i servizi pubblici e contesto della community.](https://www.nldesignsystem.nl/) - [Introduzione per sviluppatori Componenti, temi delle organizzazioni e architettura dei design token.](https://www.nldesignsystem.nl/handboek/developer/introductie/) - [Catalogo dei componenti Esplora i componenti documentati e i riferimenti disponibili.](https://www.nldesignsystem.nl/componenten/)