Birbiriyle çelişemeyen bir anket yanıtı oluşturun: yerel ONS onay kutuları, birbirini dışlayan yanıtlar, kesin tür ve renk referansları ve eksiksiz bir yerel inceleme akışı.
Yerel ONS 73.13.1 Checkbox ve Mutually Exclusive CSS/JavaScript. Özgün soru, uygulama doğrulaması ve incelemesi, ayrıca açıkça belirtilen Arial yedeği. · Uygulama başvurusu
02
ONS tasarım sistemi Tasarım Başvurusu
ONS Design System 73.13.1 derlemesi CSS, JavaScript ve Sass değişkenlerini içerir ve herkese açık hizmet kılavuzuna göre kontrol edilmiştir. Örnekte yerel Checkbox ve Mutually Exclusive davranışı kullanılır. Bağımsız örnekte OpenSans yerine Arial kullanılır; üretim kopyalama tarifi ise paketlenmiş yazı tiplerini içerir. Seyahat sorusu ve yerel yanıt incelemesi özgün örnek içeriğidir.
ONS, bilginin yayımlanmasının yanı sıra istatistiksel veri toplama hizmeti de sunar. Anketlerde karşılıklı dışlanan yanıtlar veri kalitesiyle ilgilidir: kullanıcı hem bir seyahat yöntemi hem de hiç seyahat yapılmadığını belirten bir yanıt gönderememelidir. Yerel Mutually Exclusive bileşeni, bu seçenekleri ilişkilendirir ve seçimin kaldırıldığını yardımcı teknolojilere açıklar.
Örnek, kütüphaneye seyahatle ilgili özgün bir soru sorar ve yerel yanıt önizlemesi sunar. ONS kimlik grafiklerini özellikle kullanmaz ve yanıtların toplandığını iddia etmez. Üretim anketinin kendi onay, saklama süresi, yönlendirme ve sunucu doğrulama düzenlemeleri olmalıdır.
Ana yazı tipi Open Sans'tır; ayırt edici harf biçimleri için stilistik küme 1 seçilmiştir. Yerel Sass yazı türü matrisi, uydurma kesintisiz bir ölçek yerine sabit küçük ve büyük değerler kullanır. Gövde metni 28px satır aralığıyla 18px olarak kalır. Ana büyük sınıf, orta kırılım noktasında 32/44 boyutundan 48/56 boyutuna geçer.
Tek sorulu bir sayfada h 1, grubun erişilebilir adıyla görünür başlığın eşleşmesi için fieldset legend öğesinin içine yerleştirilebilir. Üstüne ilgisiz ikinci bir h 1 eklemeyin. Örnek, hizmet bağlamını daha küçük bir paragraf olarak, yanıt yönergesini ise legend öğesinin altında tutar.
Bağımsız demoda eksik yazı tipi isteği oluşmaması için açıkça Arial kullanılır. Yükleme tarifinde yazı tipleri CSS ile birlikte kopyalanır; benimseyenler yedek yazı tipi yerine yayımlanmış OpenSans yazı tipini kullanmak istiyorsa bu gereklidir.
ONS, temel renkler için anlamsal değişkenler tanımlar. Metin siyahtır, normal bağlantılar Okyanus Mavisi, birincil düğme ise Yaprak Yeşilidir. Odak rengi Güneş Sarısıdır. Yakut Kırmızısı hataları belirtir; ancak hata mesajında yine de hangi eylemin gerektiği yazmalıdır. Yeşil Devam düğmesi, yanıtın doğrulamadan geçtiği anlamına gelmez.
Yerel ankette yerel onay kutusu kenarlığı ve seçili görünümü kullanılır. Her yanıtı ayrı bir pazarlama kartı gibi biçimlendirmez. Kısa ve nötr bir üst çizgi, ONS masthead'ini taklit etmeden bağımsız örneği sorudan ayırır.
Hem onay kutusu girdisindeki hem de eylem düğmesindeki görünür yerel odak görünümünü koruyun.
Normal seçeneklerden önce “Uyanların tümünü seçin” yazılı yönergesini kullanın.
Farkın etkileşimden önce görünür olması için karşıt seçeneği “Veya” ifadesiyle ayırın.
On iki sütunlu ızgarada genişlikler ons-col-8@m gibi sınıflarla belirtilir. 740px ve üzerindeki genişliklerde bu sınıf sekiz sütun kaplar; daha küçük boyutlarda aynı öğe kullanılabilir içerik genişliğinin tamamını doldurur. Yerel örnek, uzun sorunun tüm masaüstü genişliğine yayılması yerine okunabilir bir genişlikte satırlara bölünmesi için bu yerel sütunu kullanır.
İncelenen sürümde standart kapsayıcının azami genişliği 64.6256rem, yatay dolgusu ise 1rem'dir. Herkese açık ızgara kılavuzunda ayrıca 8px temel aralık ve 600px aralık sınırının çevresinde 16/24px oluklar açıklanır. Bu kavramları 740px orta sütun kırılımından ayrı tutun; bunlar tek bir evrensel mobil geçiş noktası değildir.
Yanıt incelemesi aynı sütunda sorunun yerini alır; Yanıtları değiştir seçeneği mevcut denetimlere geri döndürür. Değerler, rota değişikliği veya ağ isteği olmaksızın bellekte kalır.
Çalıştırılabilir aralık yardımcı sınıfları, 8px temel aralık açıklamasından daha ayrıntılıdır: 16px kök boyutunda xs, s, m, l ve xl alt kenar boşlukları sırasıyla 12,16,20,24 ve 32px'tir. Bu nedenle başvuru, gerçek yardımcı sınıf değerlerini ızgara kılavuzundan ayrı listeler.
Bir onay kutusu, ons-checkbox içinde ons-checkbox__input ve buna bağlı bir ons-checkbox__label kullanır. Giriş, yerel form davranışının çalışmaya devam etmesi için standart name ve value özniteliklerini korur. Daha kapsamlı ons-checkboxes__item yapısı, stil dosyasının beklediği boşluğu ve tıklama alanını sağlar.
Normal seçeneklerde ons-js-exclusive-group-item kullanılır. Son seçenek ise bunun yerine ons-js-exclusive-option kullanır ve etkisini açıklayan data-deselect-message özniteliğini içerir. Canlı bölge span’i, her iki sıfat özniteliğiyle birlikte bulunmalıdır; dekoratif bir ek işaretleme değildir. Bu span’in kaldırılması, yerel denetleyicinin varsayımlarını bozar.
Bu kaynak örneği, üç normal seçenek ve bir karşıt yanıt için eksiksizdir. İsimleri ve değerleri gerçek bir soruya uyarlayın; ilgisiz bir doğrulama denetimini yalnızca “exclusive” olarak yeniden adlandırmayın.
html
<fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset>
ONS tasarım sistemi Doğrulama ve değişiklik davranışı
Kitaplık durumu ve uygulama durumu
Karşıt seçeneklerden hangilerinin temizleneceğini kitaplık belirler. Örnekteki küçük uygulama işleyicisi, yerel bir inceleme gösterilmeden önce yalnızca en az bir yanıtın bulunup bulunmadığını denetler. Seçim yapılmadığında yazılı bir hata gösterir ve odağı bağlantılı iletiye taşır. Hata bağlantısı doğrudan ilk seçeneğe gider; kullanıcı burada işlem yapabilir.
Denetleyici, DOM’daki onay kutusu değerine ek olarak önbelleğe alınmış hasValue durumunu da izler. Yalnızca checked=false ile sıfırlama yapmak, bu önbelleğin güncel olmamasına yol açabilir. Bu nedenle sıfırlama işlemi, yerel dinleyicilerin modeli güncellemesini sağlamak için işaretli her girişe tıklar ve ardından odağı soruya geri taşır. Bu, stil dosyasına bakarak denetlenemeyecek somut bir entegrasyon konusudur.
İnceleme, seçilen etiketlerin listesini gösterir. Yanıtları değiştir seçeneği, denetimleri ve seçimlerini korur. Bu örneğin arkasında bir sunucu bulunmadığından, anket yanıtının alındığını öne süren bir başarı paneli gösterilmez.
npm paketi derlenmiş varlıkları, Sass kaynaklarını, Nunjucks makrolarını ve temel sayfa şablonunu içerir. Bu önizlemede derlenmiş HTML yöntemi kullanılır: resmî CSS dosyasını ve main.js’yi kopyalayın, belgelenen işaretlemeyi oluşturun ve betiği gövde içeriğinden sonra yükleyin. Betik, DOM hazır olduğunda eşleşen bileşen kancalarını başlatır.
Sunucu tarafında oluşturulan bir projede bunun yerine components içindeki Nunjucks makro dosyaları kullanılabilir. Checkbox makrosu; onay kutusu dizisini, etiketleri, açıklamaları, hata yapılandırmasını ve mutuallyExclusive yapılandırmasını kabul eder. dontWrap ayarını yapmak, fieldset sorumluluğunu kapsayıcı soru bileşenine aktarır; erişilebilir grup adını atlamanın bir yolu değildir.
Tek tek Sass dosyalarını seçiyorsanız önce sistem değişkenlerini, yardımcıları, araç sınıflarını, temel stilleri ve nesneleri; ardından bileşen kurallarını ve bileşen bağımlılıklarını içe aktarın. Tam derlenmiş CSS, bu küçük ve bağımsız örnek için bağımlılıkları tek tek seçme gereğini ortadan kaldırır.
Paket sürümünü sabitleyin ve css, scripts ile fonts dosyalarını tek bir kararlı yerel varlık dizininden sunun.
Statik sayfalar için derlenmiş HTML yöntemini seçin veya sunucu tarafında oluşturulan bir uygulamada Nunjucks makro yollarını yapılandırın.
CSS, JavaScript ve işaretlemenin aynı sürümden olmasını sağlayın; yükseltme sonrasında karşılıklı dışlama davranışını yeniden denetleyin.
Yürüyüş ve Otobüs’ü seçin, ardından “Kütüphaneyi ziyaret etmedim.” seçeneğini seçin. Önceki iki seçimin de temizlenmesi gerekir. Ardından Bisiklet’i seçin: karşıt yanıt temizlenirken Bisiklet işaretli kalmalıdır. Odaktaki girişlerde Boşluk tuşunu kullanarak testi tekrarlayın ve görsel bir onay işaretinin tüm davranışları doğruladığını varsaymak yerine duyuru bölgesini inceleyin.
Hatayı sınamak için seçim yapmadan devam edin; ardından geçerli bir yanıtı inceleyip Yanıtları değiştir ile geri dönün. Son olarak, çelişkili yanıtlar dizisinden sonra sıfırlama yapıp yeni bir seçim yapın; bu, yerel denetleyicideki eski durumun yakalanmasına yardımcı olur. 390px genişlikte soru ve tüm etiketler, sayfayı yatay kaydırmadan okunabilir kalmalıdır.
Bu testler, yerel etkileşimi doğrular; gerçek bir ankette yanıtların gönderilmesini, erişilebilirlik sertifikasını veya soruların istatistiksel açıdan niteliğini doğrulamaz. Gerçek bir hizmette çelişkili değerler için sunucu tarafı doğrulaması ve yanıt kategorilerinin eksiksiz olup olmadığına yönelik araştırma yine gerekir.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ONS survey question specimen</title><link rel="stylesheet" href="vendor/ons-73.13.1/css/main.css"><style>body,input,button,select,textarea{font-family:Arial,sans-serif!important}body{margin:0}main{padding-top:32px;padding-bottom:32px}.specimen{border-top:4px solid var(--ons-color-ocean-blue);padding-top:16px}.actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin-top:32px}[hidden]{display:none!important}.error{border-left:4px solid var(--ons-color-errors);padding:16px;margin:24px 0;color:var(--ons-color-errors)}.quiet{color:var(--ons-color-text-light)}fieldset{min-width:0}.ons-checkbox__label{max-width:100%}</style><main class="ons-container"><p class="ons-u-fs-s specimen">Independent specimen · Original library survey</p><div class="ons-grid"><div class="ons-grid__col ons-col-8@m"><section id="question"><p class="quiet">Travel · Question 1 of 1</p><div id="error" class="error" tabindex="-1" hidden><strong>Select a travel method or tell us you did not visit.</strong><p><a href="#walk">Go to the answer choices</a></p></div><form id="survey" novalidate><fieldset class="ons-fieldset"><legend class="ons-fieldset__legend"><h1 class="ons-fieldset__legend-title">How did you travel to your local library last week?</h1></legend>
<div class="ons-js-mutually-exclusive ons-mutually-exclusive">
<p class="ons-checkboxes__label">Select all that apply</p><div class="ons-checkboxes__items"><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="walk" name="travel" value="walk" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="walk" id="walk-label">Walk or wheel</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="cycle" name="travel" value="cycle" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="cycle" id="cycle-label">Cycle</label></span></span><br><span class="ons-checkboxes__item"><span class="ons-checkbox"><input type="checkbox" id="bus" name="travel" value="bus" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-group-item"><label class="ons-checkbox__label" for="bus" id="bus-label">Bus or tram</label></span></span><br></div>
<p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s"><span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">Or</span><span class="ons-checkbox"><input type="checkbox" id="none" name="travel" value="none" class="ons-checkbox__input ons-js-checkbox ons-js-exclusive-option" data-deselect-message="Selecting this will uncheck all other options"><label class="ons-checkbox__label" for="none" id="none-label"><span class="ons-u-vh">Or, </span>I did not visit the library</label></span></p>
<span class="ons-js-exclusive-alert ons-u-vh" role="alert" aria-live="polite" data-group-adjective="deselected" data-option-adjective="deselected"></span></div></fieldset><div class="actions"><button class="ons-btn" type="submit"><span class="ons-btn__inner">Review answer</span></button><button id="reset" type="button" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Reset</span></button></div></form><p class="ons-u-mt-l ons-u-fs-s quiet">Practice only. Your selection stays in this page and is not submitted.</p></section><section id="review" hidden><h1 tabindex="-1">Review your answer</h1><h2 class="ons-u-fs-m">Travel to the library last week</h2><ul id="answer"></ul><p>No response has been sent. Return to the question to change your selection.</p><button id="change" class="ons-btn ons-btn--secondary"><span class="ons-btn__inner">Change answers</span></button></section></div></div></main><script src="vendor/ons-73.13.1/scripts/main.js"></script><script>const form=document.querySelector('#survey'),q=document.querySelector('#question'),r=document.querySelector('#review'),err=document.querySelector('#error'),checks=[...form.querySelectorAll('input[type=checkbox]')];form.onsubmit=e=>{e.preventDefault();const chosen=checks.filter(x=>x.checked);if(!chosen.length){err.hidden=false;err.focus();return}err.hidden=true;document.querySelector('#answer').replaceChildren(...chosen.map(x=>{let li=document.createElement('li');li.textContent=document.querySelector('label[for="'+x.id+'"]').textContent.replace(/^Or, /,'');return li}));q.hidden=true;r.hidden=false;r.querySelector('h1').focus()};document.querySelector('#change').onclick=()=>{r.hidden=true;q.hidden=false;checks[0].focus()};document.querySelector('#reset').onclick=()=>{checks.filter(x=>x.checked).forEach(x=>x.click());err.hidden=true;checks[0].focus()};window.demoReady=true;</script></html>
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.
04
ONS tasarım sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Yerel örnekte, yerel Checkbox ve Mutually Exclusive kancalarıyla derlenmiş CSS ve JavaScript sürümü 73.13.1 kullanılır. Arial, açıkça belirtilmiş yerel bir yedek yazı tipidir; üretim kopyalama talimatları paketteki OpenSans fontlarını içerir. Sources bölümündeki eksiksiz çalışan örnek ZIP’i, önizleme bağımlılıklarının tam hâlini ve belgenin tamamını da sağlar. ZIP’i çıkarın, ilgili dizinde python3 -m http.server 8080 komutunu çalıştırın ve ardından http://localhost:8080/ons.html adresini açın. Modül tabanlı örnekleri file:// üzerinden açmayın.
bash / html
npm install --save-exact @ons/[email protected]
mkdir -p public/vendor/ons
cp -R node_modules/@ons/design-system/css public/vendor/ons/
cp -R node_modules/@ons/design-system/scripts public/vendor/ons/
cp -R node_modules/@ons/design-system/fonts public/vendor/ons/
<!-- In your page head -->
<link rel="stylesheet" href="/vendor/ons/css/main.css">
<!-- Place the compiled component markup in the body. -->
<!-- Immediately before </body>; initializes matching component hooks -->
<script src="/vendor/ons/scripts/main.js"></script>
Projeniz İçin Bir İstem
Ajan İstemi
Yerel Checkbox ve Mutually Exclusive kancalarını, ilişkili fieldset/legend öğelerini, normal yanıt grubunu ve bir karşıt yanıtı kullanarak bağımsız bir ONS73.13.1 anket örneği oluşturun. Gerekli canlı bölgeyi ve seçim kaldırma özniteliklerini ekleyin. Eşleşen yerel CSS ve main.js dosyalarını sunun; bunların yerine geçecek bir karşılıklı dışlama denetleyicisi yazmayın. Düzenlemeleri koruyan, sunucusuz yerel boş yanıt doğrulaması ve yanıt incelemesi ekleyin; sunucuda yanıt alındığı iddiasında bulunmayın. Önbelleğe alınmış durumun tutarlı kalması için yerel olaylarla sıfırlayın. Resmî kimlik işaretlerini kullanmadan ons-col-8@m sınıfından ve doğrulanmış tipografi/anlamsal renk kurallarından yararlanın.
05
ONS tasarım sistemi Kaynaklar ve Kapsam
Özgün anket metni kullanan bağımsız uygulama örneği. Yerel kod MIT lisanslıdır; ONS kimliği ve içerik lisansları bundan ayrıdır. Yanıtlar iletilmez, kalıcı olarak saklanmaz veya resmî istatistik olarak sunulmaz.
