# Ontario tasarım sistemi

## Ontario tasarım sistemi Arayüz Önizlemesi

Tüm aşamaları açın, daraltın ve destekleyici bir bölüme doğrudan gidin.

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

### Metin, yüzey ve etkileşim renkleri

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ontario-colour-greyscale-white | #FFFFFF | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-greyscale-black | #1A1A1A | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-greyscale-greyscale5 | #F2F2F2 | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-greyscale-greyscale20 | #CCCCCC | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-link | #0066CC | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-link-hover | #00478F | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-link-active | #002142 | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-link-visited | #551A8B | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-focus | #009ADB | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-alert | #CD0000 | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-success | #118847 | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
| --ontario-colour-system-information | #1080A6 | Gerçek 9.1.0 belirteç dışa aktarımı. Derlenmiş bileşen CSS bu rolleri değerlere dönüştürür; tek başına belirteç içe aktarmak bir bileşen oluşturmaz. |
### Boşluk ölçeği

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ontario-spacing-0 | 0 | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-1 | 0.25rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-2 | 0.5rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-3 | 0.75rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-4 | 1rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-5 | 1.5rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-6 | 2rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-7 | 2.5rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-8 | 3rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-9 | 4rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
| --ontario-spacing-10 | 5rem | Yayımlanmış rem boşluk değeri; spacing-5 1.5rem olduğundan soneki doğrudan piksel değeri değildir. |
### Tipografi ve ızgara referansı

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| --ontario-font-sizes-small | 0.875rem | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-font-sizes-standard-body-text | 1rem | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-font-sizes-large | 1.25rem | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-font-sizes-x-large | 1.5rem | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-breakpoints-small | 40em | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-breakpoints-medium | 73em | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-grid-columns-total-columns | 12 | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-grid-columns-row-width | 1152 | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
| --ontario-grid-columns-column-gutter | 32 | Yayımlanmış belirteç değeri; birimsiz ızgara değerleri kaynak sistemi tanımlar ve ilgili ızgara uygulamasına göre yorumlanmalıdır. |
## Ontario tasarım sistemi Eksiksiz Kılavuz

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ı.

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

- İşaretlemeyi, sürüm numarası sabitlenmiş betiğin görünürlük davranışıyla eşleştirin.

### Tüm aşamaları denetleyen kontrolleri eşzamanlı tutun

Tümünü genişlet ve Tümünü daralt, üç aşama panelini birlikte yönetir. Paneller ayrı ayrı da kullanılabilir. Örnek, sabitlenmiş betiğin desteklediği işaretlemeyi izler; betiğin kaldırmadığı, gizli içeriğin bulma yoluyla gösterilmesi gibi daha yeni web sitesi işaretlemeleriyle bunu bir arada kullanmaz. Bir belge sayfası, yüklü sürümden bağımsız olarak güncellenebilir; çalıştırılabilir örnek ise gerçek paketle eşleşmelidir.

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

1. Sürümü sabitlenmiş complete-styles paketini yükleyin.

2. Genişletme/daraltma betiğini kopyalayın; tüm giriş dosyasını ve CSS'ı kaydedin.

3. Tüm panelleri açın; ardından bağlantısıyla bir aşamayı daraltıp yeniden açın.

4. 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ışı.

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

Kod referansı

- Yayımlanan betiği kurulum komutunu kullanarak kopyalayın. Bağlantılar, ARIA durumunun eşzamanlı kalması için yerel düğmeyi tetikler.

### ontario.css — derlenmiş akordeon ve özgün düzen

Resmî 9.1.0 akordeon kurallarının ardından özgün duyarlı düzen.

```
/* Accordion rules compiled from Ontario 9.1.0 published SCSS. */
.ontario-accordion__button--expand-all:focus,.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb;outline:4px solid rgba(0,0,0,0);transition:box-shadow .1s ease-in-out}.ontario-accordion__button{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified","Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}.ontario-accordion__button{font-size:1.25rem;letter-spacing:.03rem;line-height:1.5;margin:0 0 .75rem 0;max-width:48rem}@media screen and (min-width: 40em){.ontario-accordion__button{font-size:1.5rem;letter-spacing:.0313rem;line-height:1.5}}.ontario-accordions__container{max-width:48rem;width:100%}.ontario-accordion{border-top:2px solid #ccc}.ontario-accordion:last-of-type{border-bottom:2px solid #ccc}.ontario-accordion__controls{display:flex;justify-content:flex-end}.ontario-accordion__button,.ontario-accordion__button--expand-all{background:none;border:0;box-sizing:border-box}.ontario-accordion__button--expand-all{font-size:1rem;margin-bottom:.5rem;color:#06c;cursor:pointer}.ontario-accordion__button--expand-all:focus,.ontario-accordion__button--expand-all:hover{color:#00478f;text-decoration:underline}.ontario-accordion__button--expand-all:active{color:#002142;text-decoration:underline}.ontario-accordion--expand-close-all{display:none}.ontario-accordion__controls--active .ontario-accordion--expand-close-all{display:block}.ontario-accordion__controls--active .ontario-accordion--expand-open-all{display:none}.ontario-accordion__button{display:flex;align-items:flex-start;color:#06c;cursor:pointer;padding:.75rem .5rem;text-align:left;width:100%;margin-bottom:0}.ontario-accordion__button .ontario-accordion__button-icon--close,.ontario-accordion__button .ontario-accordion__button-icon--open{margin-right:.5rem}.ontario-accordion__button .ontario-icon{width:1.75rem;height:1.75rem}.ontario-accordion__button:focus,.ontario-accordion__button:hover{background-color:hsl(0,0%,95%);color:#00478f}.ontario-accordion__button:focus{box-shadow:0 0 0 4px #009adb inset}.ontario-accordion__button:active{color:#002142}.ontario-accordion__content{display:none;padding:.75rem .75rem 2rem .75rem;margin-left:0}@media screen and (min-width: 40em){.ontario-accordion__content{margin-left:2rem}}.ontario-accordion__content *{margin-top:0;max-width:48rem;width:100%}.ontario-accordion__content ul,.ontario-accordion__content ol{max-width:calc(100% - 3rem)}.ontario-accordion__content>:last-child{margin-bottom:0}.ontario-accordion__button-icon--close,.ontario-expander--active .ontario-accordion__button-icon--open{display:none}.ontario-expander--active~.ontario-accordion__content,.ontario-expander--active .ontario-accordion__button-icon--close{display:block}.ontario-accordions__container .ontario-h1,.ontario-accordions__container .ontario-h2,.ontario-accordions__container .ontario-h3,.ontario-accordions__container .ontario-h4,.ontario-accordions__container .ontario-h5,.ontario-accordions__container p,.ontario-accordions__container h1,.ontario-accordions__container h2,.ontario-accordions__container h3,.ontario-accordions__container h4,.ontario-accordions__container h5,.ontario-accordions__container h6{margin:0}

/* Original composition. */
main{max-width:1200px;padding:32px;margin:auto}.kicker{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:24ch}.ontario-lead-statement{max-width:65ch}.layout{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;margin-top:40px}aside{padding:24px;border-top:4px solid #1a1a1a;background:#f2f2f2;align-self:start}aside h2{font-size:26px;line-height:1.35;margin-top:0}aside h3{font-size:20px}.jump{padding-left:24px}.jump li{margin-bottom:16px}.note{font-size:16px;line-height:1.5}.ontario-accordion__content p+ul{margin-top:16px}.ontario-accordion__content ul+p{margin-top:16px}@media(max-width:760px){main{padding:20px}.layout{grid-template-columns:1fr;gap:32px}h1{font-size:36px}}
```

Kod referansı

- Bu sürümü sabitlenmiş sürüm için hem derlenmiş tema hem de bileşene özgü akordeon stil dosyası gereklidir.

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

```
npm create vite@latest ontario-guide -- --template vanilla
cd ontario-guide
npm install
npm install @ongov/ontario-design-system-complete-styles@9.1.0
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

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

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

- Akordeon kılavuzu İçerik, işaretleme ve genişletme modeli.

- Paket kurulumu Paket rolleri ve entegrasyon seçenekleri.

- Renk sistemi Etkileşim ve anlamsal renkler.

- Sürümü belirtilmiş herkese açık kaynak Yayımlanmış stiller, belirteç dışa aktarımları ve akordeon uygulaması.

## Ontario tasarım sistemi İlgili Kaynaklar

### Poncho

Çalışan bir etkinlik dizini üzerinden Poncho’in Bootstrap 3 ızgarasını, anlamsal eylem renklerini ve tümü tıklanabilir hizmet panellerini inceleyin.

### Queensland Government tasarım sistemi

Gerçek tema rolleri, yerel onay kutusu stilleri ve erişilebilir bir inceleme iletişim kutusu içeren, resimli ve eksiksiz bir kaynak seçici üzerinden Queensland’in Bootstrap uygulamasını keşfedin.

### Ripple

Aşamalı açılır içerik, ilerleme göstergesi ve sonraki adıma klavye odağı içeren eksiksiz bir atölye zaman çizelgesi üzerinden Ripple’ın gerçek renk rollerini, 14 kademeli aralık ölçeğini ve duyarlı tipografi referanslarını keşfedin.


- [Uygulama başvurusu](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Kaynak](https://github.com/ongov/ontario-design-system)
- [Kod referansı](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Kod referansı](https://github.com/ongov/ontario-design-system)
- [Akordeon kılavuzu İçerik, işaretleme ve genişletme modeli.](https://designsystem.ontario.ca/components/detail/accordions.html)
- [Paket kurulumu Paket rolleri ve entegrasyon seçenekleri.](https://designsystem.ontario.ca/docs/documentation/develop/npm-packages.html)
- [Renk sistemi Etkileşim ve anlamsal renkler.](https://designsystem.ontario.ca/components/detail/colours.html)
- [Sürümü belirtilmiş herkese açık kaynak Yayımlanmış stiller, belirteç dışa aktarımları ve akordeon uygulaması.](https://github.com/ongov/ontario-design-system)