Amsterdam Tasarım Sistemi.

Amsterdam Tasarım Sistemi Bileşeni ve temayı birbirinden ayırın

Açık kaynak katmanını doğru biçimde kullanın

Amsterdam, bileşen CSS'yi ayrı yayımlar; böylece sınıf sözleşmesi React dışında uygulanabilir. Stil sayfası, CSS özel özelliklerine bağlıdır; eksiksiz bir tema olmadan içe aktarılırsa önemli boyutlar ve renkler tanımsız kalır. Bu nedenle bu örnekte yerel Switch stil sayfası, eksiksiz ve özgün bir nötr yapılandırmayla birlikte kullanılmıştır.

Depo, açık kaynak paketlerini özel varlıklardan ayrı tutar. İncelenen 4.3.0 token paketi, onu açık kaynak lisansının kapsamı dışında bırakan kendi lisans bildirimine sahiptir. Amsterdam Sans, simgeler ve şehir logosu da belirli kısıtlamalara tabidir. Bu kılavuz, bunları bağlam olarak anmakla birlikte yeniden dağıtmaz ve herkese açık bir npm indirmesinin sınırsız marka kullanım hakkı verdiğini öne sürmez.

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Eksiksiz, nötr bir yapılandırma

Komponentin ihtiyaç duyduğu tüm özellikleri sağlayın

Referans tablosu, seçilen Switch stil sayfasında kullanılan tüm değişkenleri listeler. Genişlik, düğme boyutları, kenarlık genişliği, renkler, anahat uzaklığı, imleç ve üzerine gelme görünümü için açık değerler belirtilmiştir. Bunlar bu örnek için belirlenmiş özgün değerlerdir; kopyalanmış Amsterdam tasarım token'ları değildir. Bu ayrım, okuyucuların eksik tema parçalarını tahmin etmek zorunda kalmadan örneği yeniden oluşturmasını sağlar.

İz 50px genişliğinde; düğme 22px, kenarlık ise 3px'tir. Yerel checked durumu dönüşümü, düğmenin hareket mesafesini düğme genişliği ve kenarlık genişliğinden hesaplar. Bu nedenle yalnızca iz genişliğini değiştirmek düğmenin hizasının bozulmasına yol açabilir. İlgili geometri değerlerini birlikte değiştirin ve her iki durumu da inceleyin.

:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}

Kod referansı

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Yerel Switch bileşeninin yapısı

Etiket, input öğesinin ardından gelmelidir

React uygulaması bir sarmalayıcı, bir input ve ilişkili, boş bir label oluşturur. CSS, input öğesinin odak, seçili ve devre dışı durumlarına göre etiketi biçimlendirmek için bitişik kardeş seçicileri kullanır. Düz bir HTML uygulamasında bu sıralamayı koruyun; input ile etiket arasına açıklama eklemek bu seçicileri bozar.

Gerçek input, role="switch" olan bir checkbox'tır. Yerel checked özelliğini ve klavye davranışını korur. Görsel etiket metin içermediği için aria-label veya aria-labelledby aracılığıyla erişilebilir bir ad sağlayın. Bu örnek, görünür bir ayar başlığını referans alır ve açıklamasını aria-describedby ile ilişkilendirir.

<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>

Kod referansı

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Anlık ayarlar

Bir switch, geçerli görünümü değiştirir

Bileşen kaynağı, Switch bileşenini anında uygulanan ikili bir ayar olarak tanımlar. Önizleme bu sözleşmeye uyar: Daha büyük metin makale boyutunu, daha güçlü kontrast metni ve dış çizgiyi değiştirir; azaltılmış hareket ise rozetin kısa görünme efektini kaldırır. Bu yerel seçimlerin bir hesap hizmetine gönderildiği izlenimini veren bir Kaydet düğmesi yoktur.

Varsayılanları geri yükle seçeneği, yerel üç checked durumunu da temizler ve makalenin varsayılan sınıflarını yeniden uygular. Durum mesajı etkin ayarları açıklar. Sayfadan ayrıldıktan veya sayfayı yeniden yükledikten sonra hiçbir şey saklanmaz. Üretim ortamındaki bir tercih hizmeti kalıcılık sağlayabilir; ancak ayarın bu sayfayı mı, cihazı mı yoksa hesabı mı etkilediğini belirtmelidir.

1. Daha büyük metni aç ve yanındaki makaledeki paragraf boyutunu incele.
2. Daha güçlü kontrast seçeneğine odaklan ve klavyeden açıp kapatmak için Boşluk tuşuna bas.
3. Varsayılanları geri yükle seçeneğini kullan ve üç anahtarın da makaleyle birlikte eski hâline döndüğünü doğrula.

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Klavye, odak ve hareket

Yerel girdi öğesini kullanılabilir tut

Stil sayfası, gerçek kontrolü korurken görsel girdi genişliğini küçültür. Odak seçicisi, dış çizgiyi sonraki etikete uygular. Girdiyi dekoratif bir div ile değiştirmek, yerel form anlamını ortadan kaldırır ve ayrıca klavye desteği gerektirir. Girdiye display:none uygulama.

Yerel stil sayfası, geçiş efektlerini yalnızca prefers-reduced-motion:no-preference koşulunda uygular. Makale efekti de yerel anahtardan bağımsız olarak işletim sistemi tercihine uyar. Sistem düzeyinde daha az hareket isteyen bir kullanıcının, örneğin sakin davranması için ek bir anahtar keşfetmesi gerekmemelidir.

• Tek doğru kaynak olarak checked özelliğini kullan; bununla ilgisiz bir görsel etkin durumu uydurma.
• Her ayara sabit bir ad ver ve açıklamasını girdiyle ilişkili tut.
• Tema geometrisini veya renklerini değiştirdikten sonra kapalı, açık, odaklı ve devre dışı durumları test et.

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Okuma önizlemesinin düzeni

Denetimin yanındaki etkiyi göster

Örnek, her ayarın makalede görünür bir sonucu olması için iki sütunlu bir düzen kullanır. Uygulamaya özgü 700px kırılma noktasının altında, denetimler önizlemenin üstüne gelecek şekilde alt alta dizilir. 900px azami genişlik ve 32px boşluk, özgün düzen kararlarıdır; şehir genelinde kullanılan bir ızgara belirtecinin kanıtı değildir.

Nötr yazı tipi Arial'dır. Gövde metni 18px ve satır aralığı 1.5 değerindedir; büyük metin modu yalnızca makaleyi 22px yapar. Bu, uygulamaya özgü bir ayar örneğidir; tarayıcı yakınlaştırmasının yerini tutmaz ve bu boyutların Amsterdam tarafından belirlendiği anlamına gelmez. Uzun etiketler, yerel anahtarın genişliği daraltılmadan satırlara bölünür.

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi CSS veya React entegrasyonu

Uygulama katmanını seç

Mevcut bir React uygulamasında doğrulanmış Switch, standart girdi özniteliklerini kabul eder ve ref değerini girdiye iletir. Kontrollü kullanımda checked ve onChange sağlanır; kontrolsüz kullanımda defaultChecked sağlanabilir. Bileşen, uygulama depolama alanı veya hesap tercihleri için bir API sağlamaz.

Bu bağımsız HTML örneği için yalnızca açık kaynaklı Switch CSS gerekir. Kurulum ve eksiksiz kod, eksik tema yapılandırmasını ve yerel durum yönetimini sağlar. Paket yükleyicisi bağımlılık olarak tescilli varlıkları indirebilir; bunların diskte bulunması, içe aktarılmalarına veya dağıtılmalarına izin verildiği anlamına gelmez. Satıcı tarafından pakete eklenen örnek yalnızca seçilen CSS bileşenini ve açık kaynak lisansını içerir.

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Kullanım ve sınırlamalar

Görsel benzerliği kurumsal bağlılıkla karıştırma

Şehir sistemi, belediye ürünlerinin tutarlı ve erişilebilir olmasını amaçlar. Yeniden kullanılabilir kodu lisansı kapsamında incelenip uyarlanabilir; ancak logosu, tescilli yazı tipi ve simge varlıkları ayrı koşullara tabidir. Önizleme, bir Amsterdam hizmetiyle karıştırılmaması için özgün markalama ve nötr içerik kullanır.

Doğrulanmış kapsam; eksiksiz bir özel tema ve anlamlı yerel davranışa sahip tek bir yerel bileşenden oluşur. Bu, şehir temasının baştan sona yeniden uygulanması değildir. Daha geniş kapsamlı CSS paketini kullanan gerçek bir ürün, bu Switch yapılandırmasını ilgisiz denetimlere genellemek yerine ek bileşenlerin gerektirdiği tüm değişkenleri tanımlamalı ve test etmelidir.

Destekleyici belirtimi okuyun

Amsterdam Tasarım Sistemi Bileşen örnekleri

:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}

<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>