Sistema di progettazione Aksel.

Sistema di progettazione sistema di design Aksel: parti dalle specifiche della versione 8

Non mescolare le vecchie classi con i nuovi token

Aksel v8 usa i token --ax-* e le classi dei componenti .aksel. La guida alla migrazione specifica che le vecchie classi .navds non funzionano più e che i token specifici dei componenti sono stati rimossi. Un tutorial basato su uno screenshot precedente può quindi sembrare plausibile, pur fornendo indicazioni di implementazione errate.

Questa pagina fissa CSS nativo alla versione 8.18.0 e indica l’installazione del corrispondente React. L’anteprima usa le classi native della tabella esaminate con un normale HTML; la selezione e l’ordinamento sono gestiti dal JavaScript dell’applicazione. Non afferma che scaricare un foglio di stile crei un Table di React.

Leggi la specifica di supporto

Sistema di progettazione sistema di design Aksel: ruoli tipografici e caricamento dei caratteri

Usa 600 per il token in grassetto.

Il riferimento dei token definisce Source Sans 3, Source Sans Pro, Arial e sans-serif come stack di font. Il peso Regular è 400 e il token denominato bold è 600. Le dimensioni del testo del corpo includono 14, 16, 18 e 20px; gli stili per i titoli arrivano a 24, 28, 32 e 40px.

L’anteprima locale imposta il token del font su Arial e sovrascrive esplicitamente l’uso del font ereditato, così da non effettuare richieste a font remoti. È una scelta dichiarata di fallback, non l’affermazione che Arial sia il carattere tipografico principale di Aksel. Le dimensioni del testo dei componenti sono fornite da CSS.

Leggi la specifica di supporto

Sistema di design Aksel: spaziatura, raggio e layout

I token denominati in pixel corrispondono a valori rem

--ax-space-16 corrisponde a 1rem e --ax-space-24 a 1.5rem. La sintassi dei primitivi v8 segue questi nomi: padding="space-16" e gap={{xs:"space-8",md:"space-16"}}. Non sostituire una precedente proprietà numerica di spaziatura senza prima consultare le indicazioni per la migrazione.

I ruoli dei raggi documentati includono 2, 4, 8, 12 e 16px, oltre a full. L’anteprima mantiene la geometria nativa della tabella e applica space-24 attorno ai controlli dell’applicazione. La larghezza di lettura di 64rem è una scelta locale; i valori dei breakpoint provengono dal foglio di stile esaminato.

Leggi la specifica di supporto

Sistema di design Aksel: colori semantici compatibili con il tema

Mantieni il ruolo, non un singolo valore esadecimale

Il foglio di stile nativo risolve --ax-text-neutral in neutral-1000, che corrisponde a #202733 in modalità chiara e a #dfe1e5 in modalità scura. --ax-bg-default passa dal bianco a #0e151f. Inserire il valore del testo chiaro direttamente in un contenitore scuro vanificherebbe la mappatura dei ruoli.

L’anteprima alterna la classe del tema .light/.dark e lascia che i colori delle righe alternate, dei bordi e della riga selezionata seguano i token ufficiali. La selezione mantiene una casella di controllo spuntata e un conteggio visibile. Una riga colorata da sola non costituisce un’interfaccia di selezione.

Leggi la specifica di supporto

Sistema di design Aksel: struttura semantica della tabella

Le intestazioni non sono normali celle

La tabella nativa ha classi distinte per intestazione, corpo, riga, cella d’intestazione e cella di dati. L’equivalente in React usa Table.Header, Table.Body, Table.Row, Table.HeaderCell e Table.DataCell. La colonna dei riferimenti è un’intestazione di riga e ogni intestazione di colonna ha scope=col.

La didascalia dà un nome alla raccolta. I giorni di attesa sono quantità e sono allineati a destra; gli identificativi di riferimento restano allineati a sinistra. Alle larghezze ridotte, l’anteprima mantiene lo scorrimento orizzontale in un’area etichettata e raggiungibile tramite tastiera, invece di compromettere le relazioni della tabella trasformando le righe in schede.

• Usa celle d’intestazione sia per le etichette delle colonne sia per gli identificativi delle righe.
• Allinea a destra i valori quantitativi, non i codici postali o gli identificativi.
• Aggiungi una didascalia per dare alla tabella un nome significativo.

Leggi la specifica di supporto

Sistema di design Aksel: densità e ordinamento

Modificare la densità cambia la spaziatura interna

Nella versione nativa di CSS esaminata, le celle di dimensione media usano space-12 in verticale e space-8 in orizzontale. La dimensione piccola usa space-4 in verticale, mentre quella grande usa space-16 in verticale. Il selettore della densità cambia la classe modificatrice nativa; non riduce la dimensione del font del corpo per forzare più informazioni nella finestra.

L’intestazione Giorni di attesa è un pulsante di ordinamento in stile nativo. Il relativo gestore ordina i valori numerici e aggiorna aria-sort su quell’intestazione. Questa trasformazione è responsabilità dell’applicazione: anche React API espone lo stato dell’ordinamento e onSortChange, invece di ordinare automaticamente record di dominio arbitrari.

Leggi la specifica di supporto

Sistema di design Aksel: selezione delle righe accessibile da tastiera

Assegna a ogni riga un controllo esplicito

La documentazione di Table avverte che onRowClick da solo non è accessibile da tastiera. L’esempio fornisce quindi una casella di controllo con etichetta per ogni riferimento e una casella per selezionarli tutti. La casella aggregata diventa indeterminata quando è selezionato solo un sottoinsieme delle righe.

L’ordinamento mantiene la selezione usando l’identificativo stabile del riferimento. Non usa mai l’indice corrente della riga come chiave di selezione, perché al cambio di ordinamento la spunta finirebbe su un record diverso. Il conteggio della selezione si aggiorna in un’area di stato con annuncio discreto. I record selezionati non vengono inviati da nessuna parte.

Leggi la specifica di supporto

Sistema di design Aksel: caricare CSS e React compatibili

Mantieni allineate le versioni dei pacchetti

Installa @navikt/ds-react e @navikt/ds-css alla stessa versione, poi importa CSS una sola volta, vicino alla radice dell’applicazione. Il pacchetto include già i token. La guida ufficiale all’importazione di CSS supporta anche file globali e dei componenti granulari, ma il baseline è obbligatorio e i font e i token devono essere forniti o sostituiti esplicitamente.

Aksel usa i livelli CSS. Evita selettori ampi non associati a un livello, che potrebbero sovrascrivere involontariamente gli stili dei componenti. Il layout personalizzato dell’applicazione va applicato alle classi definite da te. L’anteprima autonoma include una versione locale di CSS e sostituisce intenzionalmente il font; l’esempio con React è un percorso d’integrazione distinto, verificato sul codice sorgente.

1. Fissa insieme le versioni dei pacchetti React e CSS.
2. Importa il foglio di stile una sola volta e usa i figli semantici di Table.
3. Gestisci ordinamento e selezione nello stato dell’applicazione.
4. Verifica il cambio di tema, i controlli da tastiera e l’area di scorrimento per schermi stretti.

Leggi la specifica di supporto

Esempi di componenti del sistema di design Aksel

import { Table } from '@navikt/ds-react';
import '@navikt/ds-css';

export function CaseTable() {
  return <Table size="medium" zebraStripes>
    <caption>Fictional follow-up records</caption>
    <Table.Header><Table.Row>
      <Table.HeaderCell scope="col">Reference</Table.HeaderCell>
      <Table.HeaderCell scope="col">Next activity</Table.HeaderCell>
      <Table.HeaderCell scope="col" align="right">Waiting days</Table.HeaderCell>
    </Table.Row></Table.Header>
    <Table.Body><Table.Row>
      <Table.HeaderCell scope="row">DEMO-204</Table.HeaderCell>
      <Table.DataCell>Confirm appointment preference</Table.DataCell>
      <Table.DataCell align="right">4</Table.DataCell>
    </Table.Row></Table.Body>
  </Table>;
}

import { HStack, Box } from '@navikt/ds-react';
<HStack gap={{ xs: 'space-8', md: 'space-16' }}>
  <Box padding="space-16">First region</Box>
  <Box padding="space-16">Second region</Box>
</HStack>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Aksel table workbench</title><link rel="stylesheet" href="vendor/aksel-8.18.0/index.css"><style>:root{--ax-font-family:Arial,sans-serif}body,body *,body *:before,body *:after{font-family:Arial,sans-serif!important}body{background:var(--ax-bg-default);color:var(--ax-text-neutral);font-size:18px;line-height:1.5}main{max-width:64rem;padding:32px 24px;margin:auto}h1{font-size:32px;font-weight:600;line-height:1.25;margin:16px 0 24px}p{margin:16px 0}.toolbar{display:flex;gap:24px;flex-wrap:wrap;padding:24px;background:var(--ax-bg-sunken);margin:24px 0}select{font-size:16px;padding:8px;background:var(--ax-bg-input);color:var(--ax-text-neutral);border:1px solid var(--ax-border-neutral)}label{font-size:16px;display:flex;gap:8px;align-items:center}.scroll{overflow-x:auto}table{min-width:38rem}caption{text-align:left;font-weight:600;margin-bottom:16px}input[type=checkbox]{width:20px;height:20px;accent-color:var(--ax-bg-accent-strong);cursor:pointer}small{font-size:14px;display:block;margin-top:24px;color:var(--ax-text-neutral-subtle)}:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px}@media(max-width:767px){main{padding:24px 16px}.toolbar{padding:16px;gap:16px}h1{font-size:28px}}</style><body class="light"><main><p>AKSEL v8 · NATIVE TABLE CSS</p><h1>Follow-up record workbench</h1><p>Compare density and theme while sorting and selecting fictional records. Selection follows each reference when the rows move.</p><div class="toolbar"><label>Density <select id="density"><option value="medium">Medium</option><option value="small">Small</option><option value="large">Large</option></select></label><label>Theme <select id="theme"><option value="light">Light</option><option value="dark">Dark</option></select></label></div><p id="selection" role="status">0 records selected</p><div class="scroll" tabindex="0" role="region" aria-label="Fictional follow-up records, horizontally scrollable"><table class="aksel-table aksel-table--zebra-stripes" id="records"><caption>Fictional follow-up records</caption><thead class="aksel-table__header"><tr class="aksel-table__row"><th class="aksel-table__header-cell" scope="col"><input id="all" type="checkbox" aria-label="Select all records"></th><th class="aksel-table__header-cell" scope="col">Reference</th><th class="aksel-table__header-cell" scope="col">Next activity</th><th class="aksel-table__header-cell" id="sort-header" scope="col" aria-sort="ascending"><button id="sort" type="button" class="aksel-table__sort-button">Waiting days ↑</button></th></tr></thead><tbody class="aksel-table__body" id="rows"></tbody></table></div><small>OpenDesign specimen using native Aksel 8.18.0 CSS and an explicit Arial fallback. Fictional data, no NAV identity or external actions.</small></main><script>const data=[{id:'DEMO-204',activity:'Confirm appointment preference',days:4},{id:'DEMO-218',activity:'Read the submitted example note',days:12},{id:'DEMO-231',activity:'Arrange an example callback',days:7}];let ascending=true;const selected=new Set(),all=document.querySelector('#all');function render(){const body=document.querySelector('#rows');body.replaceChildren();for(const r of [...data].sort((a,b)=>ascending?a.days-b.days:b.days-a.days)){const tr=document.createElement('tr');tr.className='aksel-table__row'+(selected.has(r.id)?' aksel-table__row--selected':'');const td=document.createElement('td');td.className='aksel-table__data-cell';const c=document.createElement('input');c.type='checkbox';c.setAttribute('aria-label','Select '+r.id);c.checked=selected.has(r.id);c.onchange=()=>{c.checked?selected.add(r.id):selected.delete(r.id);updateSelection();tr.classList.toggle('aksel-table__row--selected',c.checked)};td.append(c);const th=document.createElement('th');th.scope='row';th.className='aksel-table__header-cell';th.textContent=r.id;const activity=document.createElement('td');activity.className='aksel-table__data-cell';activity.textContent=r.activity;const days=document.createElement('td');days.className='aksel-table__data-cell aksel-table__data-cell--align-right';days.textContent=r.days;tr.append(td,th,activity,days);body.append(tr)}updateSelection()}function updateSelection(){all.checked=selected.size===data.length;all.indeterminate=selected.size>0&&selected.size<data.length;document.querySelector('#selection').textContent=selected.size+' records selected'}all.onchange=()=>{selected.clear();if(all.checked)data.forEach(r=>selected.add(r.id));render()};document.querySelector('#sort').onclick=()=>{ascending=!ascending;document.querySelector('#sort-header').setAttribute('aria-sort',ascending?'ascending':'descending');document.querySelector('#sort').textContent='Waiting days '+(ascending?'↑':'↓');render()};document.querySelector('#density').onchange=e=>document.querySelector('table').className='aksel-table aksel-table--zebra-stripes aksel-table--'+e.target.value;document.querySelector('#theme').onchange=e=>document.body.className=e.target.value;render();</script></body></html>