# Aksel Tasarım Sistemi

## Aksel Tasarım Sistemi Arayüz Önizlemesi

Bekleme günlerini sayısal olarak sıralayın, kayıtları seçin, yoğunluğu değiştirin ve açık/koyu tema rollerini karşılaştırın.

## Aksel Tasarım Sistemi Tasarım Referansı

@navikt/ds-css 8.18.0 yerel stil sayfası incelendi ve güncel v8 belgeleri kullanıldı. Açık/koyu değerler kapsamla sınırlandırılmıştır; önizleme, uzaktaki yazı tipleri yerine Arial kullanır ve özgün örnek kayıtları içerir.

### v8 tipografisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ax-font-family | Source Sans 3, Source Sans Pro, Arial, sans-serif | Önizlemede açıkça Arial yedeği kullanılır. |
| --ax-font-weight-regular / bold | 400 / 600 | Adında kalın geçen belirteci 700 değerine eşitlemeyin. |
| --ax-font-size-medium / large | 1rem / 1.125rem | Standart kök boyutunda 16px / 18px. |
| --ax-font-size-heading-xlarge / 2xlarge | 2rem / 2.5rem | 32px / 40px. |
### Boşluk ve kesme noktaları

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ax-space-8 / 16 / 24 / 32 | 0.5 / 1 / 1.5 / 2rem | Belirteç adları, standart piksel karşılıklarını ifade eder. |
| --ax-radius-2 / 4 / 8 / 12 / 16 | 2 / 4 / 8 / 12 / 16px | Köşe yarıçapı rolleri. |
| sm / md / lg / xl / 2xl | 480 / 768 / 1024 / 1280 / 1440px | Değerler sürümlenmiş CSS içinde incelendi. |
### Yerel tablo geometrisi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Medium cell padding | 12px 8px | Varsayılan dikey / yatay dolgu. |
| Small / large vertical padding | 4px / 16px | Yerel yoğunluk değiştiricileri; yatay dolgu 8px olarak kalır. |
| Header divider | 2px | Gövde satırı ayırıcı çizgisi 1px olarak kalır. |
### Tema rolleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ax-bg-default | #fff light / #0e151f dark | Kök yüzey. |
| --ax-text-neutral | #202733 light / #dfe1e5 dark | Çözümlenmiş neutral-1000 değerleri. |
| --ax-bg-accent-strong | #2176d4 light / #4580ca dark | Çözümlenmiş accent-600 değerleri; kodda rolü kullanın. |
## Aksel Tasarım Sistemi Eksiksiz Rehberi

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## 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

### Anlamsal React Tablosu

Gerçek Table alt bileşenleri ve bir satır başlığı; miktarlar sağa hizalanır.

```
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>;
}
```

Kod referansı

### Geçerli duyarlı temel bileşen sözdizimi

Temel bileşen özelliklerinde v8 belirteç adlarını kullanın.

```
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>
```

Kod referansı

### Eksiksiz bağımsız örnek

Belgenin tamamı düzeni, denetimleri ve başlatma kodunu içerir. Tam göreli vendor varlıklarını almak için bağlantılı örnek arşivini çıkarın ve HTTP üzerinden sunun.

```
<!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>
```

Kod referansı

- Eksiksiz örneği Kaynaklar bölümünden indirin. README dosyasında tam yerel başlatma komutu bulunur.

- Vendor yollarını bu belgeye göreli tutun; arşiv, bu önizlemenin kullandığı tüm varlıkları içerir.

## Aksel Tasarım Sistemi Aracı Kurulumu

### Uygulamaya Başlangıç Noktası

Önizlemede yerel CSS 8.18.0 oluşturulur. React bileşimi kaynak üzerinden doğrulanmıştır ancak ayrıca derlenmemiştir. Sürümleri eşleştirin; v7 navds sınıflarını v8 CSS ile birleştirmeyin. Kaynaklar bölümündeki eksiksiz çalışan örnek ZIP'i, önizlemenin tam bağımlılıklarını ve belgeyi de sağlar. ZIP'i çıkarın, o dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/nav-aksel.html adresini açın. Modül kullanan örnekleri file:// üzerinden açmayın.

```
npm install @navikt/ds-react@8.18.0 @navikt/ds-css@8.18.0
# React entry:
# import "@navikt/ds-css";
# import { Table, HStack, Box } from "@navikt/ds-react";
```

### Projeniz İçin Bir İstem

```
Eşleşen 8.18.0 CSS/React paketlerini kullanarak anlamsal bir Aksel v8 tablosu oluşturun. Altyazıyı, sütun başlıklarını ve referans satır başlıklarını koruyun. Gerçek ax belirteçlerini ve space-* temel bileşen özelliklerini kullanın. aria-sort ile sayısal sıralama, kararlı kimlikle onay kutusu seçimi ve belirsiz durumlu tümünü seç denetimi sağlayın. Klavyeyle etkileşim için onRowClick özelliğine güvenmeyin. Açık/koyu tema rol belirteçlerini ve dar ekranlarda etiketli yatay kaydırma alanını destekleyin.
```

## Aksel Tasarım Sistemi Kaynaklar ve Kapsam

Bağımsız örnek kayıtları kullanılır; NAV kimliği kullanılmaz. Açıklanmış bir yazı tipi yedeğiyle yerel stil sayfası kullanılır. Sıralama, seçim ve düzen uygulama davranışlarıdır; gerçek yardım veya vaka verileri gösterilmez.

- Aksel tasarım sistemi Resmî bileşenler, temel bileşenler, kalıplar ve uygulamaya başlama noktası.

- Tasarım belirteçleri Resmî belirteç başvurusu.

- Aksel kaynak kodu Resmî kaynak projesi ve geliştirme geçmişi.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

## Aksel Tasarım Sistemi İlgili Kaynaklar

### NHS tasarım sistemi

Açık bir randevu tercihi akışı oluşturmak için NHS.UK tipografisini, duyarlı aralıkları, gruplandırılmış radyo seçeneklerini ve bağlama uygun ayrıntıları kullanın.

### NL tasarım sistemi

Gerçek katkıcı bileşenleri ve açıkça belirtilmiş bir temayı kullanarak bir kamu hizmeti arayüzü oluşturun. Bu örnek, belirteç eşlemesini, veri listesi yapısını ve aynı düzenleme iş akışını kullanan iki özgün temayı göstermek için Utrecht CSS kullanıyor.

### NSW tasarım sistemi

Bağımsız bir yerel okuma listesi içeren eksiksiz bir atölye kılavuzunda NSW tasarım belirteçlerini, Public Sans tipografisini ve klavyeyle erişilebilen yerel sekmeleri keşfedin.


- [Uygulama başvurusu](https://aksel.nav.no/komponenter/core/table)
- [Kaynak](https://aksel.nav.no/grunnleggende/styling/design-tokens)
- [Kaynak](https://aksel.nav.no/komponenter/core/table)
- [Destekleyici belirtimi okuyun](https://aksel.nav.no/grunnleggende/migreringsguider/versjon-8)
- [Destekleyici belirtimi okuyun](https://aksel.nav.no/grunnleggende/styling/design-tokens)
- [Destekleyici belirtimi okuyun](https://aksel.nav.no/grunnleggende/kode/komponent-api)
- [Destekleyici belirtimi okuyun](https://aksel.nav.no/komponenter/core/table)
- [Destekleyici belirtimi okuyun](https://aksel.nav.no/grunnleggende/kode/css-import)
- [Kod referansı](https://aksel.nav.no/komponenter/core/table)
- [Kod referansı](https://aksel.nav.no/grunnleggende/kode/komponent-api)
- [Aksel tasarım sistemi Resmî bileşenler, temel bileşenler, kalıplar ve uygulamaya başlama noktası.](https://aksel.nav.no/designsystemet)
- [Tasarım belirteçleri Resmî belirteç başvurusu.](https://aksel.nav.no/grunnleggende/styling/design-tokens)
- [Aksel kaynak kodu Resmî kaynak projesi ve geliştirme geçmişi.](https://github.com/navikt/aksel)