Progettazione di prodotti aziendali · Nuova risorsa
Sistema di design Nord.
Esamina i token del tema Therapy di Nord e i contratti dei Web Component attraverso una bozza di richiesta per una sala: ruoli cromatici reali, dimensionamento responsive dei campi, convalida esplicita e risultati preparati localmente.
Interpretazione offline HTML/CSS dei token di Nord Therapy; l’integrazione con Web Component nativi è illustrata separatamente. · Riferimento per l’implementazione
02
Riferimento di progettazione sistema di design Nord
Token Nord 9.0.4 e documentazione aggiornata dei componenti. I valori qui sotto descrivono il tema predefinito Therapy, non tutti i brand Nordhealth. La documentazione pubblica non concede il permesso di usare Nord al di fuori dell’ambito previsto per Nordhealth.
Sistema di design Nord Nord è un sistema di prodotto interno con riferimenti pubblici
Rendi evidente l’uso previsto
La documentazione di Nord descrive un sistema progettato per le esperienze Nordhealth. I componenti consultabili pubblicamente sono riferimenti utili, ma l’esempio non implica che il brand o i termini relativi ai componenti consentano un riutilizzo commerciale indiscriminato. I nomi delle sale e il flusso di richiesta usati qui sono dati dimostrativi originali.
La tabella dei token predefiniti rappresenta Therapy. Un’applicazione veterinaria o sanitaria deve selezionare il tema previsto, invece di presumere che un accento blu definisca ogni prodotto Nordhealth. Mantieni la scelta del tema a livello di applicazione.
Sistema di design Nord I ruoli Therapy mantengono l’interfaccia discreta
Distingui i ruoli di testo, bordo e superficie
L’esempio usa il ruolo del testo principale per i dettagli della richiesta e quello più tenue per le spiegazioni. I pannelli bianchi si sovrappongono alla pagina bianco sporco; un bordo più marcato identifica i campi modificabili. Il testo di errore compare accanto al titolo non valido, anziché tingere di rosso l’intera interfaccia. L’anteprima non contiene informazioni cliniche o sui pazienti.
Sistema di design Nord Il testo compatto richiede interlinea adeguata
Usa insieme la dimensione e l’interlinea documentate
Il token abbina un corpo del testo di 0.875rem a un’interlinea di 1.5, mentre il testo dei moduli ha una propria altezza di riga di 20px. Sono regole diverse: applicare ai paragrafi lunghi il valore previsto per i moduli li comprime inutilmente. Il riferimento interattivo usa il token della famiglia Nordhealth Sans; questa interpretazione offline utilizza deliberatamente i font di sistema disponibili, senza dichiarare di includere un font con licenza.
Sistema di design Nord Espandi i controlli all’interno della griglia dell’applicazione
Il componente non sceglie il breakpoint della pagina
Input parte da una variabile inline-size di 240px. expand è la modalità documentata per occupare la colonna disponibile del campo. Nel nostro esempio, su desktop l’elenco delle sale è accanto all’editor, mentre su mobile i due elementi sono impilati; il breakpoint è una scelta dell’applicazione, non un token Nord. Quando si seleziona una riga, il nome della sala, la capienza e l’etichetta di disponibilità restano visibili.
Nell’interpretazione offline, l’elenco delle sale selezionate è un gruppo di radio nativi. L’esempio separato fornito dalla libreria usa un Select con cinque opzioni. Entrambi consentono di scegliere una sala, ma mostrano layout diversi e non sono presentati come implementazioni runtime identiche del componente.
Sistema di design Nord Scegli un solo elemento responsabile di etichette e messaggi di errore
Per questo modulo bastano campi autonomi
Input o Select possono gestire autonomamente etichetta, suggerimento ed errore. Se viene usata, la composizione Field assume queste responsabilità: duplicare entrambi i gruppi di proprietà produrrebbe indicazioni ridondanti. Questo esempio usa la modalità autonoma e assegna un unico errore breve quando il titolo, dopo aver rimosso gli spazi iniziali e finali, è vuoto.
I campi disabilitati non vengono inclusi nell’invio, mentre quelli in sola lettura mantengono un valore pertinente disponibile per il focus e l’invio. Non disabilitare l’identificativo di una sala solo per impedirne la modifica, se deve comunque accompagnare la richiesta.
Mantieni visibile l’etichetta del titolo della richiesta.
Usa il suggerimento per indicare il contenuto atteso, non come sostituto dell’etichetta.
Associa il messaggio di convalida al controllo non valido.
Sistema di design Nord Select contiene normali elementi option
Leggi il valore dal componente host
Lo slot predefinito accetta elementi option nativi. Ogni sala ha un valore stabile e un’etichetta visibile descrittiva che ne indica la capienza. L’evento change informa l’applicazione, che ricalcola il riepilogo usando il valore del componente host. Questa composizione non include alcun tag personalizzato nord-option.
Nord consiglia Select per un insieme di opzioni più ampio e i pulsanti radio quando è utile mostrare direttamente poche scelte. L’esempio propone cinque sale; la versione offline con radio rende facile confrontare visivamente le capienze.
Sistema di design Nord I valori predefiniti di Button influiscono sulla composizione del modulo
Specifica esplicitamente semantica di azione, collegamento e caricamento
Per impostazione predefinita, Nord Button usa type="submit". Di conseguenza, un’azione secondaria di anteprima o simile a un ripristino all’interno di un modulo deve specificare il proprio type, se non deve inviarlo. Assegnando un href al componente, la semantica esposta diventa quella di un collegamento: usa questa modalità per la navigazione, invece di un gestore click che imita un’ancora.
Lo stato di caricamento mantiene il pulsante focalizzabile e impedisce attivazioni ripetute. Il suo indicatore di caricamento è nascosto alle tecnologie assistive, quindi l’applicazione deve comunicare l’avanzamento a parole. Non sostituirlo automaticamente con disabled: un’azione non disponibile e un’azione già in corso richiedono modalità diverse di focus e feedback.
L’esempio di richiesta di una sala calcola la bozza in modo sincrono, quindi non richiede un intervallo di caricamento. Il pulsante principale convalida il titolo e legge la sala scelta; se si modifica uno dei due, la frase della bozza non più aggiornata viene rimossa. Le sezioni Input e Select qui sopra spiegano quali API Nord gestiscono questi campi.
Sistema di design Nord Carica il CSS richiesto prima di chiamare i metodi del componente
Il caricamento per i prototipi e il bundling per la produzione sono diversi
La guida rapida ufficiale abbina il modulo dei componenti al framework CSS. Quest’ultimo fornisce i token condivisi e gli stili di base. Per un’applicazione con bundling, installa @nordhealth/css e @nordhealth/components, importa una sola volta il CSS e importa soltanto i moduli dei componenti che utilizzi. I moduli dei pacchetti registrano i propri elementi come effetti collaterali.
React 19 può usare direttamente questi elementi personalizzati. La guida attuale indica come deprecato il wrapper precedente @nordhealth/react. Il rendering lato server non include lo shadow DOM dei componenti; le importazioni Next.js richiedono il confine client. Tieni presenti questi limiti d’integrazione e distinguili dall’anteprima offline HTML, le cui interazioni funzionano senza la libreria.
Carica il framework CSS prima dei moduli dei componenti.
Prima di chiamare focus durante l’inizializzazione, attendi customElements.whenDefined.
Collega i gestori per la convalida e lo stato locale.
Per la produzione, crea un bundle delle dipendenze invece di affidarti a numerose richieste di moduli CDN.
Sistema di design Nord Esempi di componenti del sistema di progettazione
Esempio interattivo completo e autonomo
Salva il documento completo come index.html e aprilo in un browser. Interpretazione offline HTML/CSS dei token Nord Therapy; l’integrazione nativa con Web Components è descritta separatamente.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Nord room request interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#fafbfb;color:#0c1a3d;font:14px/1.5 system-ui,sans-serif}button,input{font:inherit}header{height:52px;background:white;border-bottom:1px solid #d8dee4;padding:0 24px;display:flex;align-items:center;justify-content:space-between}header small{color:#36434a}main{max-width:960px;margin:36px auto;padding:0 24px}h1{font-size:24px;line-height:1.2;margin:0 0 8px}h2{font-size:20px;line-height:1.2;margin:0 0 16px}p{margin:0 0 24px}.muted{color:#36434a}.layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.panel{background:white;border:1px solid #d8dee4;border-radius:5px;padding:24px}fieldset{margin:0;padding:0;border:0;min-width:0}legend{font-weight:600;margin-bottom:16px}.room{display:flex;gap:12px;padding:12px;border:1px solid #d8dee4;border-radius:3px;margin-bottom:8px;cursor:pointer;align-items:center}.room:has(:checked){border-color:#3559c7;background:#f0f4ff}.room input{accent-color:#3559c7}.room span{flex:1}.room small{display:block;color:#36434a}.room b{font-size:12px;font-weight:500}.diagram{height:120px;background:#f6f8f8;display:grid;place-items:center;margin:-24px -24px 24px;border-radius:5px 5px 0 0;border-bottom:1px solid #d8dee4}.table{height:50px;border:2px solid #bcc5cc;border-radius:5px;background:#fff;position:relative;transition:width .2s ease}.chair{position:absolute;width:12px;height:10px;border:1px solid #bcc5cc;background:white;border-radius:3px;top:-16px}.chair.bottom{top:auto;bottom:-16px}label.field{display:block;font-weight:600;margin:16px 0 8px}#title{width:100%;border:1px solid #bcc5cc;border-radius:3px;height:36px;padding:7px 12px;color:inherit;background:white}#title[aria-invalid=true]{border-color:#d24023}.error{color:#d24023;min-height:20px;font-size:12px;margin:4px 0 12px}button{background:#3559c7;color:white;border:1px solid transparent;box-shadow:0 1px 3px #0c0c0c17;border-radius:3px;padding:7px 16px;cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #3559c7;outline-offset:3px}.summary{margin-top:24px;background:#f0f4ff;border:1px solid #c6d4f9;padding:16px;border-radius:5px;overflow-wrap:anywhere}.summary:empty{display:none}.boundary{font-size:12px;color:#36434a;margin-top:24px}#selected{font-weight:600}.facts{display:flex;gap:24px;margin-bottom:24px}.facts strong{font-size:20px;display:block}.facts span{font-size:12px;color:#36434a}@media(max-width:650px){main{margin:24px auto;padding:0 16px}.layout{grid-template-columns:1fr;gap:16px}.panel{padding:16px}.diagram{margin:-16px -16px 16px}.room{padding:8px 12px}header{padding:0 16px}header small{display:none}}</style><header><strong>◈ Workplace</strong><small>Room request workspace</small></header><main><h1>A room for your next conversation</h1><p class="muted">Choose a room and prepare a request draft.</p><div class="layout"><section class="panel"><fieldset><legend>Choose a room</legend><div id="rooms"></div></fieldset></section><section class="panel"><div class="diagram" aria-hidden="true"><div class="table" id="table"></div></div><h2 id="selected">Birch</h2><div class="facts"><div><strong id="capacity">4</strong><span>Seats</span></div><div><strong>Draft</strong><span>Request status</span></div></div><form novalidate><label class="field" for="title">Request title</label><input id="title" type="text" aria-describedby="hint error" placeholder="e.g. Design review"><div id="error" class="error" role="alert"></div><p id="hint" class="muted">Use a non-sensitive meeting title. Availability is not checked in this example.</p><button type="submit">Prepare request</button></form><div class="summary" id="result" role="status"></div></section></div><p class="boundary">Independent HTML interpretation of Nord Therapy tokens. Nord is intended for Nordhealth products. This example creates a local draft only; it does not reserve a room.</p></main><script>const rooms=[['Birch',4],['Cedar',6],['Elm',8],['Maple',10],['Pine',12]],field=document.querySelector('#title'),result=document.querySelector('#result');let selected=0;document.querySelector('#rooms').innerHTML=rooms.map(([name,n],i)=>`<label class="room"><input type="radio" name="room" value="${i}" ${i===0?'checked':''}><span>${name}<small>Meeting room</small></span><b>${n} seats</b></label>`).join('');function update(){let [name,n]=rooms[selected];document.querySelector('#selected').textContent=name;document.querySelector('#capacity').textContent=n;let table=document.querySelector('#table');table.style.width=(n*12+44)+'px';table.innerHTML=Array.from({length:n},(_,i)=>`<i class="chair ${i>=n/2?'bottom':''}" style="left:${12+(i%(n/2))*24}px"></i>`).join('');result.textContent=''}document.querySelectorAll('[name=room]').forEach(input=>input.onchange=()=>{selected=Number(input.value);update()});document.querySelector('form').onsubmit=e=>{e.preventDefault();if(!field.value.trim()){document.querySelector('#error').textContent='Enter a request title.';field.setAttribute('aria-invalid','true');field.focus();return}result.textContent='Draft prepared: '+field.value.trim()+' · '+rooms[selected][0]+' · '+rooms[selected][1]+' seats. No room is reserved.'};field.oninput=()=>{field.removeAttribute('aria-invalid');document.querySelector('#error').textContent='';result.textContent=''};update();</script></html>
Questo esempio presenta le opzioni delle sale come pulsanti radio; l’esempio Nord nativo usa Select con normali elementi option. Nessuno dei due riserva una sala reale.
Una richiesta di sala con etichetta e convalida esplicita
nord-input e nord-select autonomi forniscono etichette senza la famiglia Field opzionale. All’invio, vengono letti i valori dei componenti e alla proprietà error dell’input viene assegnato l’errore.
Cinque opzioni di sala rendono Select una scelta compatta e utile.
Per impostazione predefinita Button invia il modulo; in questo esempio il type è specificato esplicitamente.
Gli elementi personalizzati vengono attesi prima di usarne i metodi. Non viene chiamato alcun servizio di prenotazione.
04
Sistema di design Nord Configurazione dell’agente
Punto di partenza per l’implementazione
Prototipo completo tramite CDN pubblico per l’uso autorizzato di Nordhealth. La documentazione attuale specifica CSS 5.2.4 e components 5.3.0. Per la produzione, è preferibile creare un bundle dei pacchetti npm; l’interpretazione visiva offline qui sotto non carica questi pacchetti remoti.
Usa i ruoli semantici Nord Therapy con controlli dotati di etichetta. Espandi i campi all’interno di un layout applicativo adattabile. Convalida il titolo della richiesta dopo averne rimosso gli spazi iniziali e finali, mantieni una sola sala selezionata e mostra soltanto un esito di bozza locale. Per le implementazioni Nordhealth reali, rispetta le autorizzazioni documentate relative a pacchetti e temi.
05
Sistema di design Nord Fonti e ambito
Riferimento indipendente OpenDesign. Nord dichiara che l’uso previsto riguarda i prodotti Nordhealth. Questa interpretazione originale HTML non prenota una sala né concede diritti d’uso del brand o dei componenti.
