Crea moduli chiari per i servizi pubblici finlandesi con Source Sans 3, token di spaziatura espliciti e un modello recuperabile di selezione dei documenti.
Prova un PDF, rifiuta un file non supportato e rimuovi il documento selezionato. I file rimangono nel browser.
Documentazione ufficiale, repository dei token esaminato e metadati di suomifi-ui-components 18.0.0. L'anteprima è un'interpretazione originale, non il runtime nativo di React.
| Nome / regola | Valore / configurazione | Utilizzo |
|---|---|---|
Family | Source Sans 3 | La versione 18 usa Source Sans 3; la versione 17 e le precedenti usavano Source Sans Pro. Carica i font separatamente. |
Body text | 18px | Stesso valore predefinito su dispositivi mobili e desktop. |
Small body | 16px | Trattamento smallScreen del testo, non una regola automatica basata sul viewport. |
Lead | 22px / 20px smallScreen | Un'introduzione per visualizzazione; non usare lo stile lead per ogni paragrafo. |
Weights | 300 / 400 / 600 | Asset dei font richiesti dal pacchetto dei componenti. |
| Nome / regola | Valore / configurazione | Utilizzo |
|---|---|---|
Space scale | 5, 10, 15, 20, 25, 30, 40, 60, 80px | Da xxs a xxxxl nel JSON del repository esaminato. |
Inset scale | 2, 4, 6, 8, 10, 16, 20px | Da insetXxs a insetXxl; non fa parte della scala di spaziatura esterna. |
Basic radius | 2px | Repository radius.basic; non dedurre un raggio ampio per le schede. |
Highlight base | hsl(212, 63%, 45%) | Blu interattivo predefinito. |
Highlight dark 1 | hsl(212, 63%, 37%) | Ruolo per le interazioni più scuro. |
Highlight light 2 | hsl(212, 63%, 90%) | Ruolo per le superfici chiare; verifica il contrasto con il testo scelto. |
| Nome / regola | Valore / configurazione | Utilizzo |
|---|---|---|
Default maximum width | 600px | Larghezza specifica del componente, non della griglia dell'intero sito. |
fullWidth | Boolean layout option | Si estende all'interno del contenitore padre quando serve al modulo. |
smallScreen | Explicit compact presentation option | Non dedurre da questa proprietà un punto di interruzione automatico globale. |
Single selection | Chosen file replaces picker and drop area | La selezione multipla è un modello distinto, con i file elencati sotto. |
Required copy roles | labelText, hintText, dragAreaText, removeFileText, addedFileAriaText | Localizza ogni ruolo; il solo nome del file non costituisce un annuncio accessibile completo. |
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.
Suomi.fi mette a disposizione React componenti stilizzati con styled-components e un pacchetto di token separato. La versione 18 imposta Source Sans 3 come font previsto. Le pagine esistenti basate sulla versione 17 potrebbero usare ancora Source Sans Pro; confrontare gli screenshot senza verificare la versione del pacchetto può portare a correggere la tipografia inutilmente.
L'anteprima incorporata rimane un'interpretazione esplicitamente etichettata di HTML/CSS del modello documentato per un singolo file. Qui sotto è ora incluso un esempio separato del componente FileInput nativo di React, con callback verificata, valore controllato, dipendenze e import dei font. Sono due implementazioni della stessa attività di selezione locale; l'esempio nativo non trasforma retroattivamente l'anteprima incorporata di HTML nel componente di React.
Usa la dimensione del testo principale documentata di 18px sia su dispositivi mobili sia su desktop. Un viewport stretto non giustifica la riduzione di tutte le spiegazioni del modulo. Il trattamento per il testo piccolo è 16px ed è riservato alle informazioni secondarie. Il testo lead è di 22px e scende a 20px con il trattamento compatto; riservalo all'introduzione della pagina.
Carica i pesi del font previsti prima di confrontare le interruzioni di riga. Il pacchetto dei componenti si aspetta gli asset di Source Sans 3, mentre questa anteprima indipendente usa deliberatamente Arial. La sostituzione è indicata nella nota dell'anteprima e non deve essere presentata come una riproduzione esatta del componente nativo.
La fonte dei token distingue la spaziatura ordinaria da quella interna. Nel JSON esaminato, l'ordinaria l corrisponde a 25px; non copiare un esempio meno recente del README che indica 32px per l. Gli inset partono da 2px e seguono una sequenza diversa. Quando generi gli stili, usa le esportazioni effettive della versione installata.
FileInput documenta una larghezza massima di 600px e un'opzione fullWidth. Si tratta di un vincolo del componente, non della prova che il contenitore di ogni pagina debba essere largo 600px. Un modulo di acquisizione documenti può inserire il campo in un layout più ampio, mantenendo il testo esplicativo vicino alla relativa etichetta.
L'etichetta visibile specifica il documento richiesto. Il testo di aiuto spiega i formati supportati, la dimensione e il numero di file prima che la persona apra il selettore. L'area di rilascio offre una scorciatoia per trascinare i file, ma non deve sostituire l'input di file. Le indicazioni ufficiali descrivono il controllo di selezione come etichetta di un input di file nativo nascosto.
In modalità a file singolo, il documento selezionato sostituisce il selettore e l'area di rilascio. Mantieni accanto al documento un'azione chiara per rimuoverlo. La modalità a più file usa una disposizione a elenco diversa; non aggiungere automaticamente altri file a una richiesta per un singolo file.
L'esempio accetta un solo PDF di dimensioni non superiori a 5,000,000 byte. Sono regole applicative scelte per questo scenario di esercitazione, non impostazioni predefinite del pacchetto né criteri ufficiali di caricamento di Suomi.fi. Il filtro accept del browser è solo un suggerimento per il selettore; dopo la selezione o il rilascio, l'esempio verifica autonomamente il nome e la dimensione del file.
Se i metadati non sono validi, il selettore rimane disponibile e viene indicato come correggere il problema. Se la selezione è valida, il nome viene mostrato usando textContent, viene comunicato il numero di byte e il focus passa al controllo di rimozione. Rimuovendo il file, si cancella il valore dell'input sottostante, si ripristina il selettore e il focus torna al punto di partenza, consentendo di selezionare di nuovo lo stesso file.
L’implementazione pubblicata di FileInput versione 18.0.0 richiama onChange con un FileList, non con un evento React change. Il valore controllato è un array di oggetti file-item; l’esempio mappa ogni File accettato in { file }. Lo stesso callback viene eseguito quando l’azione di rimozione integrata modifica l’elenco, quindi un FileList vuoto svuota l’array controllato. Questi contratti sono stati verificati nel modulo pubblicato dist/esm/core/Form/FileInput/FileInput.js.
Mantieni il valore controllato fin dal primo rendering, inizializzandolo con un array vuoto. Convalida il FileList ricevuto prima di mapparlo nell’array. Questo esempio rifiuta i file il cui nome non termina con .pdf o la cui dimensione supera 5,000,000 byte e, in caso di rifiuto, cancella la selezione. Sono regole locali dell’esempio, non un controllo di sicurezza né una policy di Suomi.fi. Prima di accettare un caricamento effettivo, resta necessaria la convalida dei contenuti lato server.
L’esempio nativo qui sotto carica Source Sans 3 nei pesi 400 e 600, monta React in un elemento root esplicito e usa styled-components tramite la libreria. Includi tslib in modo esplicito: i moduli ESM della versione 18.0.0 importano i suoi helper e una build pulita senza questa dipendenza non è riuscita. La configurazione bloccata qui sotto include il runtime mancante e gli asset dei font. Per questo esempio con il tema predefinito non è necessario un provider del tema aggiuntivo.
Leggi la specifica di supporto
La guida ufficiale agli stili mostra suomifiDesignTokens.spacing e suomifiDesignTokens.colors. L’esempio seguente usa questi percorsi esportati per un wrapper personalizzato; non è un’implementazione sostitutiva degli interni di FileInput.
import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
maxWidth: 600,
padding: suomifiDesignTokens.spacing.m,
borderColor: suomifiDesignTokens.colors.highlightBase
};Mantieni un input file nativo utilizzabile da tastiera anche quando l’area di trascinamento è ben visibile. Collega il suggerimento e l’errore tramite aria-describedby. Annuncia le modifiche alla selezione e la rimozione senza rileggere l’intera pagina. Se in un modulo possono esserci più controlli di questo tipo, il pulsante di rimozione dovrebbe identificare il file selezionato.
La proprietà ufficiale smallScreen offre una presentazione compatta. Non definisce un breakpoint globale. Questa anteprima indipendente usa una regolazione del padding, specifica dell’applicazione, a 480px e mantiene il testo del corpo a 18px. Verifica i nomi file lunghi, lo zoom e le etichette tradotte; consenti ai nomi dei file di andare a capo senza allargare l’intera pagina.
La demo non legge i contenuti dei documenti e non invia richieste. Il nome di un file selezionato e la sua dimensione in byte non dimostrano che il documento sia valido, archiviato o accettato. I servizi reali richiedono convalida lato server, avanzamento del caricamento, gestione degli errori che consenta di riprovare, regole di conservazione e una conferma legata a una risposta effettiva.
Il codice del componente è distribuito con licenza MIT. Questa licenza non autorizza un progetto indipendente a presentarsi come servizio del governo finlandese o a usare un’identità istituzionale soggetta a restrizioni. Per gli esperimenti, usa un nome di progetto neutro e, per un’implementazione ufficiale, richiedi le indicazioni appropriate sul branding.
Percorsi verificati per le esportazioni di spaziatura e colori da usare in un wrapper personalizzato.
import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
maxWidth: 600,
padding: suomifiDesignTokens.spacing.m,
borderColor: suomifiDesignTokens.colors.highlightBase
};Interpretazione locale completa. I limiti per PDF e dimensione sono scelte dello scenario; non viene effettuato alcun caricamento.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Attachment example</title><style>*{box-sizing:border-box}body{margin:0;padding:30px 20px;font:18px/1.5 Arial,sans-serif;color:#202020;background:#fff}main{max-width:600px;margin:auto}h1{font-size:32px;line-height:1.2;font-weight:400;margin:0 0 20px}p{margin:0 0 20px}label{font-weight:600;display:block}small{display:block;font-size:16px}.drop{margin-top:15px;border:2px dashed hsl(212,63%,45%);padding:30px;text-align:center;background:hsl(212,63%,90%)}button,input::file-selector-button{font:600 18px Arial;padding:12px 20px;border:1px solid hsl(212,63%,37%);border-radius:2px;background:hsl(212,63%,45%);color:white;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #202020;outline-offset:3px}input{width:100%;font-size:16px;margin:15px 0}input::file-selector-button{margin-right:10px}.file{border:1px solid #777;padding:20px;margin:20px 0;overflow-wrap:anywhere}.file button{margin-top:15px;background:white;color:hsl(212,63%,37%)}#error{color:#a32020;font-weight:bold}footer{font-size:14px;margin-top:30px;border-top:1px solid #ccc;padding-top:15px}[hidden]{display:none!important}@media(max-width:480px){body{padding:20px 15px}.drop{padding:20px}h1{font-size:28px}}</style><main><small>COMMUNITY WORKSHOP · ATTACHMENT</small><h1>Add your project outline</h1><p>Choose one PDF up to 5 MB. This local example checks file metadata; it does not read or send the document.</p><div id="picker"><label for="file">Project outline</label><small id="hint">One PDF file. Maximum 5 MB (5,000,000 bytes).</small><input id="file" type="file" accept=".pdf,application/pdf" aria-describedby="hint error"><div class="drop" id="drop">Or drop one PDF here</div></div><p id="error" role="alert" hidden></p><section id="selected" class="file" hidden aria-label="Selected attachment"><strong id="name"></strong><small id="size"></small><button id="remove" type="button">Remove file</button></section><p id="status" role="status">No file selected.</p><footer>OpenDesign interpretation of the Suomi.fi attachment pattern. Arial fallback; no official identity or React component runtime. PDF and 5 MB are example rules.</footer></main><script>const input=document.querySelector('#file'),picker=document.querySelector('#picker'),selected=document.querySelector('#selected'),error=document.querySelector('#error'),status=document.querySelector('#status');function choose(files){error.hidden=true;if(files.length!==1){error.textContent='Choose exactly one file.';error.hidden=false;input.value='';return}const file=files[0];if(!/\.pdf$/i.test(file.name)||file.size>5000000){error.textContent='Choose a PDF no larger than 5 MB.';error.hidden=false;input.setAttribute('aria-invalid','true');input.value='';return}input.removeAttribute('aria-invalid');document.querySelector('#name').textContent=file.name;document.querySelector('#size').textContent=file.size.toLocaleString('en')+' bytes · selected locally';document.querySelector('#remove').setAttribute('aria-label','Remove '+file.name);picker.hidden=true;selected.hidden=false;status.textContent='Selected file: '+file.name;document.querySelector('#remove').focus()}input.addEventListener('change',()=>{if(input.files.length)choose(input.files)});document.querySelector('#drop').addEventListener('dragover',e=>e.preventDefault());document.querySelector('#drop').addEventListener('drop',e=>{e.preventDefault();choose(e.dataTransfer.files)});document.querySelector('#remove').onclick=()=>{input.value='';picker.hidden=false;selected.hidden=true;error.hidden=true;input.removeAttribute('aria-invalid');status.textContent='File removed. Choose another file.';input.focus()};</script></html>Salva come main.jsx. Questi tre file, insieme, riproducono l’esempio nativo di React usando i comandi di configurazione.
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { FileInput } from 'suomifi-ui-components';
import '@fontsource/source-sans-3/400.css';
import '@fontsource/source-sans-3/600.css';
import './app.css';
function App() {
const [value, setValue] = useState([]);
const [error, setError] = useState('');
function change(files) {
const next = Array.from(files);
const invalid = next.length > 1 || next.some(file => !/\.pdf$/i.test(file.name) || file.size > 5000000);
if (invalid) {
setValue([]);
setError('Choose one PDF no larger than 5 MB.');
return;
}
setValue(next.map(file => ({ file })));
setError('');
}
return <main><h1>Select a workshop document</h1><p>This local example does not upload or read the document.</p>
<FileInput id="document" labelText="Workshop document" hintText="One PDF, maximum 5 MB (5,000,000 bytes)."
inputButtonText="Choose PDF" dragAreaText="or drop a PDF here" removeFileText="Remove file"
addedFileAriaText="Selected file" accept=".pdf" value={value} onChange={change}
status={error ? 'error' : 'default'} statusText={error} />
<p role="status">{value.length ? `${value[0].file.name} selected locally.` : 'No file selected.'}</p>
</main>;
}
createRoot(document.getElementById('root')).render(<App />);
Salva come app.css. Questi tre file, insieme, riproducono l’esempio nativo di React usando i comandi di configurazione.
body{margin:0;font:18px/1.5 'Source Sans 3',sans-serif;color:#292929;background:#fff}main{max-width:600px;margin:0 auto;padding:24px}h1{font-size:32px;line-height:1.2}*{box-sizing:border-box}
Salva come index.html. Questi tre file, insieme, riproducono l’esempio nativo di React usando i comandi di configurazione.
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Native Suomi.fi FileInput</title><link rel="stylesheet" href="./app.css"><div id="root"></div><script type="module" src="./app.js"></script></html>
Questa configurazione crea l’esempio nativo di React riportato qui sotto, inclusi i file locali del font Source Sans 3. Testata con formato non valido, selezione valida, rimozione integrata e un PDF troppo grande, a 390px e 1440px. Lo ZIP di anteprima già scaricabile è un’interpretazione distinta di HTML/CSS; il relativo README è ancora corretto.
npm install --save-exact [email protected] [email protected] [email protected] [email protected] [email protected] @fontsource/[email protected] npm install --save-dev --save-exact [email protected] # Save main.jsx, app.css and index.html from the complete examples below. npx esbuild main.jsx --bundle --outdir=dist --entry-names=app --loader:.woff=copy --loader:.woff2=copy cp index.html dist/index.html python3 -m http.server 8080 --directory dist # Open http://localhost:8080
Usa l’esempio nativo fornito di Suomi.fi FileInput 18.0.0 React con Source Sans 3 e le dipendenze di runtime bloccate, incluso tslib. Gestisci value come array di oggetti { file } e ricevi direttamente FileList in onChange; non leggere event.target da questo callback. Convalida formato e dimensione prima di accettare una selezione locale, gestisci l’elenco vuoto generato dalla rimozione e mantieni visibili il testo di aiuto e quello dell’errore. Considera l’anteprima incorporata HTML un’interpretazione con etichetta distinta. Nessuna delle due implementazioni carica file; la convalida lato server, l’avanzamento e la conferma dell’archiviazione richiedono un contratto backend effettivo.L’anteprima incorporata e lo ZIP scaricabile sono un’interpretazione OpenDesign HTML/CSS. L’esempio completo distinto React usa suomifi-ui-components 18.0.0 e i contratti verificati di FileInput per value e onChange. Entrambi gli esempi gestiscono la selezione locale dei file; nessuno dei due carica o archivia un documento su un server.
