Aksel Tasarım Sistemi.

Aksel Tasarım Sistemi: v8 sözleşmesini temel alın

Eski sınıfları yeni belirteçlerle karıştırmayın

Aksel v8, --ax-* belirteçlerini ve .aksel bileşen sınıflarını kullanır. Geçiş kılavuzuna göre eski .navds sınıfları artık çalışmaz ve bileşene özgü belirteçler kaldırılmıştır. Bu nedenle eski bir ekran görüntüsüne dayanan eğitim içeriği ilk bakışta makul görünse de hatalı uygulama önerileri sunabilir.

Bu sayfa yerel CSS sürümünü 8.18.0 olarak sabitler ve eşleşen React kurulumunu sağlar. Önizleme, sıradan HTML ile yerel tablo sınıflarını kullanır; seçim ve sıralama uygulamanın JavaScript katmanında gerçekleştirilir. Bir stil sayfası indirmenin React Table bileşenini oluşturduğunu iddia etmez.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi: Yazı tipi rolleri ve yazı tipi yükleme

Kalın belirteç için 600 kullanın

Belirteç başvurusu, yazı tipi ailesi yığını olarak Source Sans 3, Source Sans Pro, Arial ve sans-serif değerlerini tanımlar. Normal ağırlık 400, adlandırılmış kalın belirteç ise 600’dür. Gövde metni boyutları 14, 16, 18 ve 20px; başlık rolleri ise 24, 28, 32 ve 40px boyutlarına kadar uzanır.

Yerel önizlemede yazı tipi belirteci Arial olarak ayarlanır ve devralınan yazı tipi kullanımı açıkça geçersiz kılınarak uzaktaki yazı tiplerine istek gönderilmesi önlenir. Bu, açıklanmış bir yedek yazı tipi tercihidir; Arial’ın birincil Aksel yazı tipi olduğu iddiası değildir. Bileşen metinlerinin boyutları CSS tarafından belirlenir.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi Boşluk, köşe yarıçapı ve düzen

Piksel adını taşıyan belirteçler rem değerine karşılık gelir

--ax-space-16, 1rem; --ax-space-24 ise 1.5rem değerindedir. v8 temel bileşen sözdiziminde bu adlar kullanılır: padding="space-16" ve gap={{xs:"space-8",md:"space-16"}}. Geçiş yönergelerini kontrol etmeden eski sayısal boşluk özelliğini kullanmayın.

Belgelenen köşe yarıçapı rolleri arasında 2, 4, 8, 12 ve 16px ile full bulunur. Önizlemede tablonun yerel geometrisi korunur ve uygulama denetimlerinin çevresinde space-24 kullanılır. 64rem okuma genişliği yerel bir tercihtir; kesme noktası değerleri incelenen stil sayfasından alınır.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi Temaya duyarlı anlamsal renk

Tek bir hex değeri değil, rolü koruyun

Yerel stil sayfasında --ax-text-neutral, neutral-1000 değerine karşılık gelir; bu değer açık temada #202733, koyu temada ise #dfe1e5 olur. --ax-bg-default, beyazdan #0e151f değerine değişir. Açık tema metin rengini koyu temalı bir kapsayıcıda sabit kodlamak, rol eşlemesini boşa çıkarır.

Önizleme .light/.dark tema sınıfını değiştirir ve tablonun şerit, kenarlık ve seçili satır renklerinin resmî belirteçleri izlemesini sağlar. Seçim için yine de işaretli bir onay kutusu ve görünür bir sayı bulunur. Yalnızca renkli bir satır, seçim arayüzü değildir.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi Anlamsal tablo yapısı

Başlıklar sıradan hücreler değildir

Yerel tabloda başlık, gövde, satır, başlık hücresi ve veri hücresi için ayrı sınıflar bulunur. React karşılığı olarak Table.Header, Table.Body, Table.Row, Table.HeaderCell ve Table.DataCell kullanılır. Referans sütunu bir satır başlığıdır ve her sütun başlığında scope=col bulunur.

Altyazı, koleksiyonun adını belirtir. Bekleme günleri miktar değerleridir ve sağa hizalanır; referans tanımlayıcıları sola hizalı kalır. Önizleme, dar ekranlarda kart biçimli satırlar oluşturmak için tablo ilişkilerini bozmaktansa yatay kaydırmayı etiketli ve klavyeyle odaklanabilir bir alan içinde tutar.

• Hem sütun etiketleri hem de satır tanımlayıcıları için başlık hücreleri kullanın.
• Posta kodlarını veya tanımlayıcıları değil, sayısal değerleri sağa hizalayın.
• Tabloya anlamlı bir ad vermek için altyazı ekleyin.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi Yoğunluk ve sıralama

Yoğunluğu değiştirmek dolguyu değiştirir

İncelenen yerel CSS bileşeninde orta yoğunluktaki hücrelerde dikey olarak space-12, yatay olarak space-8 kullanılır. Küçük yoğunlukta dikey space-4, büyük yoğunlukta ise dikey space-16 kullanılır. Yoğunluk seçici yerel değiştirici sınıfı değiştirir; görüntü alanına daha fazla bilgi sığdırmak için gövde yazı tipi küçültülmez.

Waiting days başlığı, yerel stile uygun bir sıralama düğmesidir. İşleyicisi sayısal değerleri sıralar ve bu başlıkta aria-sort değerini günceller. Bu dönüşümün sahibi uygulamadır: React API da sıralama durumunu ve onSortChange özelliğini sunar; rastgele alan kayıtlarını kendiliğinden sıralamaz.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi Klavyeyle kullanılabilir satır seçimi

Her satıra açık bir denetim ekleyin

Table belgeleri, yalnızca onRowClick kullanmanın klavyeyle erişilebilir olmadığını belirtir. Bu nedenle örnekte her referans için etiketli bir onay kutusu ve tümünü seç onay kutusu bulunur. Yalnızca bazı satırlar seçildiğinde toplu seçim onay kutusu belirsiz duruma geçer.

Sıralama, seçimi kararlı referans tanımlayıcısına göre korur. Sıra değiştiğinde işaretin başka bir kayda geçmemesi için seçili anahtar olarak geçerli satır dizinini hiçbir zaman kullanmaz. Seçim sayısı, nazikçe duyurulan bir durum bölgesinde güncellenir. Seçilen kayıtlar hiçbir yere gönderilmez.

Destekleyici belirtimi okuyun

Aksel tasarım sistemi ile eşleşen CSS ve React paketlerini yükleyin

Paket sürümlerini eşitleyin

@navikt/ds-react ve @navikt/ds-css paketlerini aynı sürümde yükleyin, ardından uygulama köküne yakın bir yerde CSS paketini bir kez içe aktarın. Paket belirteçleri zaten içerir. Resmî CSS içe aktarma kılavuzu, genel ve bileşen dosyalarının ayrı ayrı içe aktarılmasını da destekler; ancak temel dosya gereklidir ve yazı tipleri/belirteçler sağlanmalı ya da açıkça değiştirilmelidir.

Aksel, CSS katmanlarını kullanır. Bileşen stillerini yanlışlıkla geçersiz kılabilecek kapsamlı, katmansız seçicilerden kaçının. Özel uygulama düzeni kendi sınıflarınızda tanımlanmalıdır. Bağımsız önizlemede yerel, sürümü sabitlenmiş CSS ve kasıtlı olarak değiştirilmiş bir yazı tipi kullanılır; React örneği ise kaynağı doğrulanmış ayrı bir entegrasyon yoludur.

1. React ve CSS paketlerinin sürümlerini birlikte sabitleyin.
2. Stil sayfasını bir kez içe aktarın ve anlamsal Table alt bileşenlerini oluşturun.
3. Sıralama ve seçimi uygulama durumunda tutun.
4. Tema geçişini, klavye denetimlerini ve dar ekranlardaki kaydırma alanını kontrol edin.

Destekleyici belirtimi okuyun

Aksel Tasarım Sistemi Bileşen Örnekleri

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>