Gerçek tipografi, yayımlanmış aralık ve renk değerleri, yerel akordeon davranışı ve sürümüyle eşleşen eksiksiz kaynak koduyla Ontario tarzı uzun biçimli bir kılavuz oluşturun.
Ontario 9.1.0 yayımlanmış CSS ve akordeon betiği, yerel font paketi, özgün içerik ve bağlantılı açılma işleyicisi. · Uygulama başvurusu
02
Ontario tasarım sistemi Tasarım Referansı
Ontario tasarım belirteçleri ve complete-styles 9.1.0; gerçek paket dışa aktarma yolları, akordeon SCSS’i ve yayımlanmış betik yerel olarak doğrulandı.
Ontario tasarım sistemi Paket Dışa Aktarımları ve Bileşen Stilleri
Eksiksiz stiller paketini bilinçli kullanın
Örnek, @ongov/ontario-design-system-complete-styles 9.1.0 sürümünü sabitler ve yayımlanmış genişletme/daraltma betiğini kullanır. Bu, ayrı Ontario web bileşeni çalışma zamanı değil, bir HTML/CSS uygulamasıdır. Paketin dışa aktarma eşlemesi, derlenmiş temayı styles/css/compiled/ontario-theme.min.css yoluyla sunar; fazladan bir dist öneki içeren tahmini bir derin içe aktarma yolu modern bir paketleyicide başarısız olur.
Akordeon kurallarını ekleyin
İncelenen 9.1.0 paketinde derlenmiş tema, bu örneğin kullandığı akordeon seçicilerini içermez. Bu nedenle sayfa, sağlanan CSS dosyasındaki paketin kendi ontario-accordion.scss dosyasından derlenmiş kuralları içerir. Betik, yayımlanmış dist/scripts dizininden kopyalanır; çünkü bu derin JavaScript yolu dışa aktarılmaz. Bunlar isteğe bağlı görsel iyileştirmeler değil, somut derleme gereksinimleridir.
Ontario tasarım sistemi Ontario Tipografisi ve Hiyerarşisi
Amaçlanan yazı tipi eşleşmesini koruyun
Yayımlanan tema, başlıklar için Raleway Modified, normal metinler için Open Sans sağlar. Önizleme, sayfada kullanılan normal 400 ve 700 yazı tiplerini içerir. Böylece ayırt edici başlık biçimleri korunurken uzak yazı tipi bağımlılığı önlenir. Tipografi, yazı tipleri yüklendikten sonra incelenmelidir: yedek yazı tipinin kullanılması hem satır kaydırmayı hem de akordeon başlıklarının göreli kalınlığını değiştirebilir.
Aşamaları kolayca taranabilir hâle getirin
Başlık tek bir görevi tanıtır, giriş metni kılavuzun nasıl kullanılacağını açıklar ve üç aşama başlığı net bir sıralama sunar. Her panelde destekleyici paragraflar ve listeler yer alır. Temel katılım ve erişim bilgilerini bulmak için gizli bir paneli açmak gerekmemelidir; bu nedenle yan not görünür kalır. Hiyerarşi, içerik modelinin bir parçasıdır; her cümleyi başlık hâline getirmek için bir gerekçe değildir.
Ontario tasarım sistemi Renk Rolleri ve Bileşen İpuçları
Bağlantılara ve odağa farklı görevler verin
Dışa aktarılan bağlantı rengi #0066CC; üzerine gelme, etkin ve ziyaret edilmiş durumları için ayrı renkler kullanılır. Odak rengi #009ADB'dir. Akordeon; görünür bir etiketi, yön belirten bir simgeyi ve genişletilmiş durumunu bir araya getirir; davranışı yalnızca mavi metinle açıklanmaz. Gri kenarlık, her paragrafı ayrı bir karta dönüştürmeden aşamaları birbirinden ayırır.
Yayımlanmış aralık sıralamasını kullanın
Aralık tablosu sıfırdan beş rem'e kadar uzanır ve adlandırılmış ara adımları içerir. Örnek, resmî bileşen kurallarının etrafında özel olarak tanımlanmış iki sütunlu bir düzen kullanır. 760px daralma noktası, bu gömülü kılavuzun düzenine ilişkin bir karardır; yeni bir Ontario kesme noktası olarak sunulmaz. Resmî kesme noktaları başvuru tablosunda ayrıca listelenmiştir.
Ontario tasarım sistemi Akordeon Yapısı ve Durumu
Her düğmeyi içeriğine bağlayın
Her aşamanın başlığı gerçek bir düğme içerir. Düğmenin aria-controls özniteliği benzersiz bir kimlik atanmış içerik bölümünü gösterir; aria-expanded ise bölümün açık olup olmadığını belirtir. İçerik, aria-labelledby aracılığıyla düğmeye başvurur. Yerel betik, panel açılıp kapanırken bileşen sınıflarını ve aria-hidden değerini eşzamanlı olarak yönetir. Görsel düzen doğru görünse bile yinelenen bir kimlik bu ilişkiyi bozar.
Düğme ve içerik kimliklerini benzersiz tutun.
Başlığı gerçek bir etkileşimli düğmeyle çevreleyin.
Tüm aşamaları denetleyen kontrolleri eşzamanlı tutun
Ontario tasarım sistemi Bağlantılı Açılış ve Temel İçerik
Bir aşamayı gerçek düğmesiyle açın
Kenar çubuğu bağlantıları bir aşamayı belirtir, ardından o aşama kapalıysa yerel düğmesini tetikler. Açtıktan sonra odağı düğmeye taşırlar. Böylece düğmenin genişletilmiş özniteliği, başlık sınıfı ve içerik görünürlüğü aynı geçiş sırasında eşzamanlı olarak güncellenir. Ek olay işleyicisi uygulama kodudur; okuyucuların davranışı yeniden oluşturabilmesi için kodun tamamı verilmiştir.
Genişletmeye değer destekleyici bilgiler yazın
Yazılan üç aşama, küçük bir atölye için hazırlık, materyaller ve takip sürecini kapsar. Her aşama belirli eylemler ve örneğin kapsam sınırını açıklayan bir paragraf içerir. Gerçek bir davette amaç, erişim düzenlemeleri ve katılım ayrıntıları yine doğrudan sunulmalıdır. Bu düzen, daha uzun bir kılavuzu yapılandırır; sayfayı daha kısa göstermek için temel bilgileri gizlememelidir.
Ontario tasarım sistemi Tam Kaynak Kodu ve Doğrulama
Sürümü sabitlenmiş örneği yeniden oluşturun
Bir Vite vanilla projesi oluşturun, sürümü sabitlenmiş complete-styles paketini yükleyin ve genişletme/daraltma betiğini src içine kopyalayın. Sağlanan main.js ve ontario.css dosyalarını kaydedin; kök bağlama öğesini koruyun. CSS, bu sürüm için derlenmiş resmî akordeon kurallarını ve açıkça belirtilmiş özgün düzen kurallarını içerir. Bu HTML uygulaması için bileşen kaydı ya da arka uç hizmeti gerekmez.
Genişletme/daraltma betiğini kopyalayın; tüm giriş dosyasını ve CSS'ı kaydedin.
Tüm panelleri açın; ardından bağlantısıyla bir aşamayı daraltıp yeniden açın.
Klavye odağını, genişletilmiş özniteliklerini ve telefon düzenini inceleyin.
Bağlantı ve grup davranışını inceleyin
Her aşamayı açmayı, tümünü daraltmayı ve ardından kenar çubuğundaki bağlantıyı kullanarak ortadaki aşamayı yeniden açmayı deneyin. Düğmenin genişletilmiş durumu ile görünür içeriğin birbiriyle uyumlu olduğunu doğrulayın. Kenar çubuğunun kılavuzun altına geldiği telefon genişliğinde de tekrarlayın. Yerel denetim ayrıca yazı tipi dosyalarının yüklendiğini, sayfada yatay taşma olmadığını ve yerel betiğin tarayıcı hatası üretmediğini doğrular.
Ontario tasarım sistemi Bileşen Örnekleri
main.js — atölye kılavuzunun tamamı
Özgün içeriğin tamamı, yayımlanmış betik içe aktarımı ve bağlantıyla açma davranışı.
JavaScript
import '@ongov/ontario-design-system-complete-styles/styles/css/compiled/ontario-theme.min.css';
import './ontario-expand-collapse.js';
import './ontario.css';
const topics=[['Plan the session','Make the purpose clear before people arrive.',['Publish the topic, duration and format in plain language.','Explain how participants can ask about access needs.','Tell people whether any preparation is optional or required.'],'In this sample workshop, participants discuss one familiar interface and identify one improvement. No personal information or application account is needed.'],['Prepare the materials','Offer content in a form people can use during and after the session.',['Use a meaningful heading structure in documents.','Give diagrams a concise written explanation.','Provide an accessible alternative to an activity that depends on dragging or precise pointer movement.'],'A simple agenda and an editable notes document are enough for this authored example. A real organizer should confirm the tools and formats with participants.'],['Follow up clearly','Make the next action explicit without overstating what has been agreed.',['Separate decisions from ideas that still need investigation.','State who owns any agreed follow-up.','Share notes through the channel agreed with participants.'],'This local example does not email participants or store a registration. It demonstrates the relationship between persistent guidance and expandable supporting content.']];
const icon=(dir)=>`<svg class="ontario-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24"><path d="${dir==='up'?'M6 15l6-6 6 6':'M6 9l6 6 6-6'}" fill="none" stroke="currentColor" stroke-width="2.4"/></svg>`;
document.getElementById('root').innerHTML=`<main><p class="kicker">ONTARIO DESIGN SYSTEM / ORIGINAL CONTENT STUDY</p><h1>Run an inclusive workshop</h1><p class="ontario-lead-statement">Use this sample guide to prepare a small design discussion. Expand a stage for supporting details, or open all stages to read them together.</p><div class="layout"><section aria-labelledby="guide-heading"><h2 id="guide-heading">Workshop stages</h2><div class="ontario-accordions__container"><div class="ontario-accordion__controls"><button class="ontario-accordion__button--expand-all" aria-expanded="false"><span class="ontario-accordion--expand-open-all">Expand all</span><span class="ontario-accordion--expand-close-all">Collapse all</span></button></div>${topics.map(([title,intro,items,note],i)=>`<div class="ontario-accordion" id="stage-${i}"><h3 class="ontario-accordion-heading"><button class="ontario-accordion__button" id="stage-button-${i}" aria-controls="stage-content-${i}" aria-expanded="false" data-toggle="ontario-collapse"><span class="ontario-accordion__button-icon--close">${icon('up')}</span><span class="ontario-accordion__button-icon--open">${icon('down')}</span>${title}</button></h3><section class="ontario-accordion__content" id="stage-content-${i}" aria-labelledby="stage-button-${i}" aria-hidden="true" data-toggle="ontario-expander-content"><p>${intro}</p><ul>${items.map(x=>'<li>'+x+'</li>').join('')}</ul><p>${note}</p></section></div>`).join('')}</div></section><aside><h2>Keep the essentials visible</h2><p>Session purpose, access arrangements and joining instructions belong in the main invitation. Do not hide them inside a collapsed guide.</p><h3>Jump to a stage</h3><ul class="jump">${topics.map(([title],i)=>`<li><a class="stage-link" href="#stage-${i}">${title}</a></li>`).join('')}</ul><p class="note">Published Ontario 9.1.0 styles and expand/collapse script, with original content and composition. This is not an official service page.</p></aside></div></main>`;
// Drive linked opening through the native button so its ARIA state stays synchronized.
document.querySelectorAll(".stage-link").forEach(link=>link.addEventListener("click",()=>{const button=document.querySelector(link.hash+" .ontario-accordion__button");if(button.getAttribute("aria-expanded")!=="true")button.click();button.focus()}));
Bu sürümü sabitlenmiş sürüm için hem derlenmiş tema hem de bileşene özgü akordeon stil dosyası gereklidir.
04
Ontario tasarım sistemi Ajan Kurulumu
Uygulamaya Başlangıç Noktası
Önizleme, yerel yazı tipi dosyalarıyla aynı yayımlanmış akordeon betiğini çalıştırır. Örnek, ayrı web bileşeni kitaplığını yüklemez.
sh
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/[email protected]
cp node_modules/@ongov/ontario-design-system-complete-styles/dist/scripts/ontario-expand-collapse.js src/ontario-expand-collapse.js
# Replace src/main.js and add src/ontario.css. Keep <div id="root"></div>.
npm run dev
Projeniz İçin Bir İstem
Ajan İstemi
Ontario atölye kılavuzunu complete-styles 9.1.0 ve bu sürümle eşleşen akordeon betiğiyle oluşturun. Bileşene özgü akordeon CSS'ını, gerçek Raleway Modified/Open Sans yazı tiplerini, erişilebilir düğme-içerik kimliklerini ve eşzamanlı genişletme/daraltma davranışını ekleyin. Temel bilgileri görünür tutun ve aşama bağlantılarını yerel düğmeler üzerinden yönlendirin.
05
Ontario tasarım sistemi Kaynaklar ve Kapsam
Ontario 9.1.0 stillerini ve yayımlanmış genişletme/daraltma betiğini kullanan, OpenDesign tarafından hazırlanmış bir atölye kılavuzu. İçerik ve sayfa düzeni özgündür; bu, resmî bir hizmet sayfası değildir.
