Klavye kullanımı, tümünü açma davranışı ve JavaScript olmadığında okunabilir yedek davranış da dahil olmak üzere eksiksiz bir yerel akordeon özeti üzerinden Europa’nın EC renk, tipografi ve boşluk rollerini inceleyin.
OpenDesign Kılavuzu8 Bölüm41 Başvuru KaydıÖzgün Uygulama Kılavuzu
01
Europa Component Library Tasarım Sistemi Arayüz Önizlemesi
Tek tek notları açın, tüm bölümleri genişletip daraltın ve okuma düzeninin tamamını inceleyin.
Kamuoyu görüşmeleri için hazırlanan bir bilgilendirme metnini keşfedinÖrneğin Tamamını Aç
Yerel EC 4.11.2 CSS ve Akordeon çalışma zamanı; özgün içerik ve tümünü aç denetimi. · Uygulama başvurusu
02
Europa Component Library Tasarım Sistemi Tasarım Başvurusu
Doğrulanmış @ecl/preset-ec 4.11.2 stil sayfası ve Akordeon kaynak kodu. Yerel davranış ile özgün toplu denetim bileşimi açıkça birbirinden ayrılmıştır.
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-xs
normal normal 400 0.75rem/1.125rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-s
normal normal 400 0.875rem/1.125rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-m
normal normal 400 1rem/1.5rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-l
normal normal 400 1.25rem/1.75rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-xl
normal normal 400 1.5rem/2.25rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-2xl
normal normal 400 1.75rem/2.25rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-3xl
normal normal 400 2.5rem/2.75rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-font-4xl
normal normal 400 3.25rem/3.375rem arial,sans-serif
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
--ecl-max-width
80ch
Eksiksiz kısa yazım değerleri; ağırlık, boyut, satır yüksekliği ve yedek yazı tipini içerir. Buradaki EC arayüzü Arial kullanır; özel bir web yazı tipi gerekmez.
Europa Component Library Tasarım Sistemi Europa EC Ön Ayarı ve Sürüm Seçimi
Varlıkları içe aktarmadan önce EC veya EU’yu seçin
Europa, kurumlara özel ayrı ön ayarlar sunar. Bu örnekte, bağlantısı verilen EC belgeleriyle uyumlu olan @ecl/preset-ec 4.11.2 özellikle kullanılmıştır. EU işaretlemesi, geçmiş EC ekran görüntüleri ve sürümü sabitlenmemiş bir stil sayfası bir arada kullanılmaz. Paket, dist/styles/ecl-ec.css ve dist/scripts/ecl-ec.js dosyalarını sağlar; böylece statik örnek, ön yüz çatısı eklenmeden sunulabilir.
Burada gösterilen EC uygulaması için EC ön ayarını kullanın.
CSS ve JavaScript sürümlerini aynı tutun.
Akordeon öğelerini yeniden kullanırken kaynak kimliklerini benzersiz tutun.
Bunu sürümlenmiş bir uygulama olarak ele alın
Başvuru 4.11.2 sürümünü açıklar; sonraki tüm sürümlerin aynı belirteçlere veya davranışlara sahip olduğu iddiasında bulunmaz. Yükseltme sırasında seçilen ön ayarı, bileşen işaretlemesini ve başlatma işlemini birlikte karşılaştırın. Yalnızca yeni bir paket adı veya sürüm numarası, daha önce kopyalanmış bir örüntünün doğru çalışmaya devam ettiğini kanıtlamaz.
Europa Component Library Tasarım Sistemi Europa Renk Rolleri ve Kurumsal Kimlik
Marka rengini birincil eylem renginden ayrı tutun
Ön ayarın marka rengi #004494, birincil rengi ise #3860ed’dir. Özgün bilgilendirme metninde marka rengi yalnızca üstte dar bir şerit olarak kullanılır; ardından bileşen kendi birincil eylem rengini kullanır. Neutral-20 sayfa arka planını sağlar, neutral-60 ise içeriği bölümlere ayırır. Böylece kurumsal vurgu rengi ile etkileşimli bir denetimin rengi arasındaki ayrım korunur.
Örnek için resmî bir anlam uydurmayın
Sayfa, kurgusal danışma notları içeren bir OpenDesign çalışmasıdır. Avrupa Komisyonu logosu içermez; bir fon çağrısını, hizmeti veya yasal gerekliliği temsil etmez. Hata, uyarı ve başarı paleti değerleri gerçek belirteçler olarak listelenmiştir; ancak önizleme, sırf tüm renkleri göstermek için yapay bir uygulama başarı iletisi oluşturmaz.
Europa Component Library Tasarım Sistemi Europa Tipografisi ve Boşluk Ölçeği
Eksiksiz yazı tipi kısa yazım değerlerini kullanın
EC ön ayarı, varsayılan ekran yazı tipi olarak Arial’ı tanımlar. m rolü, 400 ağırlığında 1,5rem satır yüksekliğine sahip 1rem’dir; daha büyük rollerin kendi satır yükseklikleri vardır. Başvuru, yalnızca tek başına punto değerleri yerine eksiksiz bildirimler içerir. Çalışmadaki başlık ağırlığı, sağlanan rolün üzerine uygulanan özgün bir vurgu tercihidir; bileşen metni ise yerel stil sayfasının denetiminde kalır.
rem tabanlı boşlukları ve içerik genişliğini görünür tutun
Boşluk dizisi 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 ve 4rem değerlerini içerir. Yerel azami okuma genişliği 80ch’dir. Özgün yerleşimde 1080px genişliğinde, ortalanmış bir dış sınır ve duyarlı iç boşluk kullanılır; her akordeon ise ön ayarın kendi boşluklarını korur. Dış genişlik bir bileşim tercihidir, yeni bir resmî belirteç değildir.
Europa Component Library Tasarım Sistemi Europa Akordeon İşaretlemesi ve Yerel Davranış
Başlık düğmelerini gerçek panelleri denetleyecek şekilde ayarlayın
Her .ecl-accordion__item, .ecl-accordion__toggle düğmesini içeren bir başlık barındırır. Bu düğmenin aria-controls değeri eşleşen .ecl-accordion__content panelini gösterir. Örnekte her bölge için sabit bir tetikleyici kimliği ve aria-labelledby bulunur. Yerel betik hedefi kimliğine göre bulur, aria-expanded değerini değiştirir ve panel.hidden özelliğini günceller. Öğeler yeniden sıralanır veya kopyalanırsa bu ilişkiler doğru kalmalıdır.
Harici bir sprite kullanmadan açık bir gösterge kullanın
Europa Component Library tasarım sistemi Europa Tasarım Sistemi Akordeon Etkinlikleri ve Tümünü Açma Davranışı
Durumu yerel bileşenden alın
ECL.autoInit(), başlatılan bileşeni root.ECLAccordion olarak sunar. Uygulama, onToggle etkinliğini dinler ve aria-expanded="true" değerine sahip tetikleyici düğmelerin sayısını hesaplar. Etkinlik yükünde hedef öğe ve tek tek panelleri yönetirken yararlı olan isOpening bilgisi bulunur. Sayı, görünür metinden tahmin edilmez ve ikinci, bağımsız bir açık durum dizisi tutulmaz.
Toplu işlemi öngörülebilir tutun
Tüm paneller açıksa toplu işlem onları kapatır; aksi durumda hepsini açar. İşleyici yalnızca durumu değişmesi gereken yerel düğmeleri etkinleştirir. hidden veya aria-expanded değerlerini kendisi ayarlamaz; böylece yerel etkinlikler ve hesaplanan sayı tutarlı kalır. Denetimin etiketi, bir sonraki işlemi belirtmek için Tüm bölümleri aç ile Tüm bölümleri kapat arasında değişir.
Europa Component Library tasarım sistemi Europa Tasarım Sistemi Klavye Kullanımı ve Kademeli Okuma
Düğmelerin normal etkileşimini kullanın
Sekme tuşu başlık düğmesine odaklanır; Enter veya Boşluk tuşu, düğmenin yerel tarayıcı davranışıyla düğmeyi etkinleştirir. Bu bir akordeondur, sekme listesi değil; benzetme yoluyla ok tuşlarıyla sekme gezinme davranışı eklenmemelidir. Karşılaştırmayı desteklemek için birden fazla panel açık kalabilir. Odak göstergesi, bileşen stil sayfasından gelir ve açık renkli yüzeyde görünür kalır.
Metni JavaScript olmadan da okunabilir tutun
Kaynak HTML, tüm paneller görünür ve aria-expanded="true" olarak başlar. Yerel başlatma başarıyla tamamlandıktan sonra uygulama, düğmelerini etkinleştirerek panelleri kapatır. Bu nedenle JavaScript devre dışıyken metin görünür kalır ve etkin olmayan toplu işlem araç çubuğu no-js stiliyle gizlenir. Bu yedek davranış, paragrafların kaynakta bulunup bulunmadığına bakılarak değil, gerçekten görünür olup olmadıkları kontrol edilerek test edilmiştir.
Europa Component Library tasarım sistemi Europa Tasarım Sistemi Duyarlı Paneller ve Uzun İçerik
Doğal yüksekliğe ve satır kaydırmaya izin verin
Belgede akordeon için sabit bir yükseklik kullanılmaz. Genişletilen notlar; başlıkları, sıralı listeleri ve vurgulanmış bir karar notunu içerecek şekilde uzayabilir. Daha küçük ekranlarda dış dolgu küçülür ve manşet, sağlanan daha küçük bir tipografi rolünü kullanır. Gösterge yerinde kalırken uzun tetikleyici metin satırlara bölünür. Bu durum masaüstü, tablet ve telefon genişliklerinin yanı sıra 280px genişlikte de kontrol edilmiştir.
Okuma denetimlerini bir onay akışına dönüştürmeyin
Bir paneli açmak veya kapatmak yalnızca sunumu değiştirir. Sayaç, tamamlanan bölümleri veya karşılanan gereksinimleri değil, açık bölümlerin sayısını gösterir. Altbilgi, herhangi bir danışma yanıtı veya resmî onay gönderilmediğini belirtir. Gerçek bir hizmetin, hiçbiri bileşen demosunda varsayılmayan kendine özgü uygunluk, kalıcılık ve arka uç davranışlarına ihtiyacı olur.
Europa Component Library tasarım sistemi Europa Tasarım Sistemi Eksiksiz Statik Kurulum
Eşleşen preset'i yükleyin ve tüm dosyaları kaydedin
Sağlanan index.html dosyası, sabitlenmiş preset stil sayfasını ve tarayıcı betiğini ecl-app.js dosyasından önce yükler. Eşlik eden ecl.css ve ecl-app.js dosyalarını aynı klasöre kaydedip klasörü HTTP üzerinden sunun. Tüm içerik, gösterge SVG'leri ve durum işleyicileri dosyalara dahildir. Bu çalışma için gizli bir uygulama iskeleti veya ayrı bir simge indirmesi gerekmez.
Sabitlenmiş EC preset'ini yükleyin.
index.html, ecl.css ve ecl-app.js dosyalarını birlikte kaydedin.
Dizini sunun ve tekli ile toplu geçişleri test edin.
Klavye ile, dar bir görünüm alanında ve JavaScript devre dışıyken yeniden deneyin.
Bileşen yükseltmelerinin incelenebilir olmasını sağlayın
Europa Component Library Tasarım Sistemi Bileşen Örnekleri
ecl-index.html — eksiksiz kaynak
Bileşen işaretlemesinin, içeriğin, satır içi göstergelerin ve preset varlık yollarının tamamı.
html
<!doctype html><html lang="en" class="no-js"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Public conversation brief</title><link rel="stylesheet" href="./node_modules/@ecl/preset-ec/dist/styles/ecl-ec.css"><link rel="stylesheet" href="./ecl.css"></head><body><main><header class="mast"><p class="eyebrow">European Commission preset / original study</p><h1>A clear brief for a public conversation</h1><p>Explore three preparation notes with native ECL expandable sections and an explicit open-all control.</p></header><p class="scope">ECL EC 4.11.2 CSS and native Accordion runtime. Original OpenDesign sample text; this is not an EU service, funding programme or legal guide.</p><div class="toolbar"><p id="count" role="status">0 of 3 sections open</p><button id="all" type="button" class="ecl-button ecl-button--secondary">Open all sections</button></div><div class="ecl-accordion" data-ecl-accordion data-ecl-auto-init="Accordion"><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="purpose" aria-expanded="true" id="toggle-purpose" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Define the purpose before collecting information</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="purpose" role="region" aria-labelledby="toggle-purpose"><p>This fictional planning note describes a small community consultation. It is sample editorial content, not an EU funding call, legal requirement or official application process.</p><h3>Make a decision possible</h3><ol><li>State which decision the conversation will inform.</li><li>List information already available before asking participants for more.</li><li>Name what remains outside the consultation.</li></ol><aside class="decision"><h3>Keep the outcome proportionate</h3><p>A short conversation may support a next step; it does not by itself prove consent, eligibility or public support.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="participation" aria-expanded="true" id="toggle-participation" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Make participation understandable and accessible</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="participation" role="region" aria-labelledby="toggle-participation"><p>Give participants enough context to decide whether and how to take part. The invitation should explain the topic, expected duration, available formats and the use of any notes.</p><h3>Provide usable alternatives</h3><ol><li>Offer a plain-language explanation of the activity.</li><li>Allow a person to contribute without speaking to the whole group.</li><li>Explain how to ask for an accessible format.</li></ol><aside class="decision"><h3>Check the invitation itself</h3><p>A technically accessible page is only one part of participation. Timing, language and the route for asking a question also affect who can join.</p></aside></div></section><section class="ecl-accordion__item"><h2 class="ecl-accordion__title"><button class="ecl-accordion__toggle" data-ecl-accordion-toggle aria-controls="record" aria-expanded="true" id="toggle-record" type="button"><span class="ecl-accordion__toggle-flex"><span class="ecl-accordion__toggle-title">Record decisions and unresolved questions separately</span><span class="ecl-accordion__toggle-indicator"><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 3h2v8h8v2h-8v8h-2v-8H3v-2h8z"/></svg><svg class="ecl-accordion__toggle-icon" aria-hidden="true" viewBox="0 0 24 24"><path d="M3 11h18v2H3z"/></svg></span></span></button></h2><div class="ecl-accordion__content" id="record" role="region" aria-labelledby="toggle-record"><p>After the session, distinguish what was agreed from what still needs investigation. A clean record helps the next reader understand how a proposal changed and why.</p><h3>Prepare a readable follow-up</h3><ol><li>Write the next action with an owner and review date.</li><li>Make open questions visible alongside conclusions.</li><li>Invite participants to correct an inaccurate summary.</li></ol><aside class="decision"><h3>Avoid a false completion signal</h3><p>Closing these panels is a reading action only. This preview sends no consultation response and records no formal approval.</p></aside></div></section></div><p class="footer">Each heading is a native button. Use Tab to move between headings and Enter or Space to toggle; several sections can remain open. Without JavaScript the notes remain readable.</p></main><script src="./node_modules/@ecl/preset-ec/dist/scripts/ecl-ec.js"></script><script src="./ecl-app.js"></script></body></html>
HTML dosyasını index.html adıyla kaydedin ve sağlanan diğer dosya adlarını değiştirmeyin.
ecl-app.js — eksiksiz kaynak
Okunabilir başlangıç HTML değeriyle yerel başlatma ve etkinlik odaklı toplu davranış.
JavaScript
document.documentElement.classList.remove('no-js');ECL.autoInit();const root=document.querySelector('[data-ecl-accordion]');const buttons=[...root.querySelectorAll('[data-ecl-accordion-toggle]')];const all=document.querySelector('#all');function sync(){let open=buttons.filter(b=>b.getAttribute('aria-expanded')==='true').length;document.querySelector('#count').textContent=open+' of '+buttons.length+' sections open';all.textContent=open===buttons.length?'Close all sections':'Open all sections';}root.ECLAccordion.on('onToggle',sync);buttons.forEach(b=>b.click());all.addEventListener('click',()=>{let close=buttons.every(b=>b.getAttribute('aria-expanded')==='true');buttons.filter(b=>(b.getAttribute('aria-expanded')==='true')===close).forEach(b=>b.click());});sync();
HTML dosyasını index.html adıyla kaydedin ve sağlanan diğer dosya adlarını değiştirmeyin.
04
Europa Component Library Tasarım Sistemi Aracı Kurulumu
Uygulamaya Başlangıç Noktası
http://localhost:8000/ adresini açın. Örnekte EC preset'i kullanılır; ek bir simge veya yazı tipi indirmeniz gerekmez.
sh
npm init -y
npm install @ecl/[email protected]
# Save index.html, ecl.css and ecl-app.js from the supplied examples.
python3 -m http.server 8000
Projeniz İçin Bir İstem
Ajan İstemi
Sağlanan ECL EC 4.11.2 akordeon tanımını üç eksiksiz dosyanın tümünü kullanarak uygulayın. Yerel tetikleyici/panel ilişkilerini, onToggle ile güncellenen sayacı, tümünü açma/kapatma davranışını, düğmelerin klavyeyle etkinleştirilmesini, JavaScript olmadan okumayı ve örneğin özgün kapsamının açıkça belirtilmesini koruyun. Resmî bir AB hizmeti veya resmî başvuru olduğu izlenimini vermeyin.
05
Europa Component Library Tasarım Sistemi Kaynakları ve Kapsamı
ECL EC 4.11.2 için bir OpenDesign uygulama kılavuzu. Özgün örnek notları ve sayfa düzeni, Avrupa Komisyonu hizmetini, finansman çağrısını veya yasal gerekliliği temsil etmez.
