Изучите цветовые, типографические и интервальные роли Europa EC на примере полноценного задания с нативным аккордеоном: поддержка клавиатуры, раскрытие всех пунктов и понятный резервный вариант без JavaScript.
Нативные EC 4.11.2 CSS и среда выполнения Accordion, исходный контент и элемент управления раскрытием всех разделов. · Справочник по реализации
02
Справочник по дизайну дизайн-системы Europa Component Library
Проверены таблица стилей @ecl/preset-ec 4.11.2 и исходный код Accordion. Нативное поведение и исходная реализация общего элемента управления явно различаются.
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-xs
normal normal 400 0.75rem/1.125rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-s
normal normal 400 0.875rem/1.125rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-m
normal normal 400 1rem/1.5rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-l
normal normal 400 1.25rem/1.75rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-xl
normal normal 400 1.5rem/2.25rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-2xl
normal normal 400 1.75rem/2.25rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-3xl
normal normal 400 2.5rem/2.75rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-font-4xl
normal normal 400 3.25rem/3.375rem arial,sans-serif
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
--ecl-max-width
80ch
Полные значения сокращённой записи включают начертание, размер, высоту строки и запасной шрифт. Для экранного шрифта EC здесь используется Arial; пользовательский веб-шрифт не требуется.
Дизайн-система Europa Component Library: выбор пресета Europa EC и версии
Выберите EC или EU до импорта ресурсов
В Europa предусмотрены отдельные институциональные пресеты. В этом примере намеренно используется @ecl/preset-ec версии 4.11.2, соответствующей документации EC по ссылке. Здесь не смешиваются разметка EU, устаревшие снимки экрана EC и таблица стилей без зафиксированной версии. Пакет содержит dist/styles/ecl-ec.css и dist/scripts/ecl-ec.js, поэтому статический пример можно обслуживать без добавления фронтенд-фреймворка.
Для показанной здесь реализации EC используйте пресет EC.
Используйте для CSS и JavaScript одну и ту же версию.
При повторном использовании элементов аккордеона сохраняйте уникальность исходных ID.
Считайте это реализацией с фиксированной версией
В справочнике описана версия 4.11.2; это не утверждение, что во всех более поздних выпусках токены и поведение идентичны. При обновлении следует сверять выбранный пресет, разметку компонента и его инициализацию. Одного нового имени пакета или номера версии недостаточно, чтобы считать ранее скопированный шаблон по-прежнему корректным.
Дизайн-система Europa Component Library: цветовые роли Europa и институциональная идентичность
Не смешивайте фирменный цвет с цветом основного действия
В пресете фирменный цвет — #004494, а основной — #3860ed. В исходном описании фирменный цвет используется только в виде узкой верхней полосы, а для основного действия компонент применяет собственное оформление. Neutral-20 служит фоном страницы, а neutral-60 отделяет контент. Так сохраняется различие между институциональным акцентом и цветом интерактивного элемента управления.
Не приписывайте примеру официальное значение
Эта страница — исследование OpenDesign с вымышленными заметками о консультациях. На ней нет логотипа Европейской комиссии, и она не представляет собой конкурс на финансирование, сервис или юридическое требование. В палитре перечислены фактические токены ошибок, предупреждений и успеха, но предпросмотр не создаёт искусственное сообщение об успешном выполнении приложения только ради демонстрации всех цветов.
Дизайн-система Europa Component Library: типографика и шкала отступов Europa
Используйте полные значения сокращённой записи шрифта
В пресете EC шрифтом по умолчанию для экранов задан Arial. Роль m — это 1rem с высотой строки 1.5rem и начертанием 400; для более крупных ролей заданы собственные значения высоты строки. В справочнике приведены полные объявления, а не только отдельные размеры в пунктах. Начертание заголовка в этом исследовании — оригинальное стилистическое решение поверх заданной роли, тогда как текст компонентов оформляется нативной таблицей стилей.
Покажите отступы в rem и ширину текстового блока
Шкала отступов включает значения 0.25, 0.5, 0.75, 1, 1.25, 1.5, 2, 2.5, 3, 3.5 и 4rem. Максимальная нативная ширина блока для чтения — 80ch. В исходной компоновке используется внешняя граница шириной 1080px по центру и адаптивные внутренние отступы, а каждый аккордеон сохраняет собственные отступы пресета. Внешняя ширина — решение по компоновке, а не новый официальный токен.
Дизайн-система Europa Component Library: разметка аккордеона Europa и нативное поведение
Свяжите кнопки заголовков с настоящими панелями
Каждый .ecl-accordion__item содержит заголовок с кнопкой .ecl-accordion__toggle. Её aria-controls указывает на соответствующую панель .ecl-accordion__content. В примере для каждого раздела задан постоянный ID кнопки, а для панели — aria-labelledby. Нативный скрипт находит целевой элемент по ID, изменяет aria-expanded и свойство hidden панели; при этом связи должны оставаться корректными, даже если элементы переставить или скопировать.
Используйте явный индикатор без внешнего спрайта
Europa Component Library Аккордеон дизайн-системы Europa: события и поведение кнопки «Раскрыть все»
Определяйте состояние по нативному компоненту
ECL.autoInit() предоставляет инициализированный компонент как root.ECLAccordion. Приложение подписывается на его событие onToggle и подсчитывает, у скольких кнопок-триггеров сейчас установлено aria-expanded="true". В данных события содержатся целевой элемент и свойство isOpening, полезные для обработки отдельных панелей. Состояние не определяется по видимому тексту и не хранится в отдельном массиве.
Обеспечьте предсказуемость группового действия
Если все панели раскрыты, групповое действие закрывает их; в противном случае оно раскрывает все панели. Обработчик нажимает только те нативные кнопки, состояние которых нужно изменить. Он не изменяет hidden или aria-expanded напрямую, поэтому нативные события и вычисляемое количество остаются согласованными. Текст кнопки меняется с «Раскрыть все разделы» на «Свернуть все разделы», сообщая о следующем действии.
Europa Component Library Клавиатурная навигация и последовательное чтение в дизайн-системе Europa
Используйте стандартное поведение кнопки
Клавиша Tab переводит фокус на кнопку в заголовке, а Enter или пробел активирует её согласно нативному поведению кнопок в браузере. Это аккордеон, а не список вкладок, поэтому не следует добавлять навигацию стрелками по аналогии со вкладками. Несколько панелей могут оставаться открытыми, что удобно для сравнения заметок. Индикатор фокуса задаётся таблицей стилей компонента и остаётся видимым на светлом фоне.
Сохраняйте текст читаемым без JavaScript
В исходном HTML все панели видимы, а aria-expanded="true". После успешной нативной инициализации приложение сворачивает их, активируя соответствующие кнопки. Поэтому при отключённом JavaScript текст остаётся видимым, а неактивная панель групповых действий скрывается стилем no-js. Работу этого запасного варианта проверяли по фактической видимости, а не только по наличию абзацев в исходном коде.
Europa Component Library Адаптивные панели и длинный контент в дизайн-системе Europa
Используйте естественную высоту и перенос строк
В документе не задана фиксированная высота аккордеона. Раскрытые заметки могут увеличиваться, чтобы вместить заголовки, нумерованные списки и выделенное примечание с решением. На небольших экранах исходные внешние отступы уменьшаются, а для заголовка используется меньший предусмотренный стиль текста. Длинный текст кнопки-триггера переносится, а индикатор остаётся видимым. Проверка проводилась при ширине 280px, а также на экранах настольных компьютеров, планшетов и телефонов.
Не превращайте элементы управления чтением в процесс утверждения
Открытие и закрытие панели меняет только представление. Счётчик показывает количество открытых разделов, а не завершённых разделов или выполненных требований. В нижнем колонтитуле указано, что ответ на консультацию или официальное одобрение не отправляются. Для реального сервиса потребовались бы отдельные механизмы проверки соответствия критериям, хранения данных и взаимодействия с серверной частью; демонстрация компонента ничего такого не подразумевает.
Europa Component Library Полная статическая настройка дизайн-системы Europa
Установите соответствующий пресет и сохраните все файлы
В поставляемом index.html таблица стилей закреплённого пресета и скрипт для браузера загружаются до ecl-app.js. Сохраните рядом с ним файлы ecl.css и ecl-app.js и откройте папку через HTTP-сервер. Весь контент, SVG-индикаторы и обработчики состояний включены. Для этого примера не требуется скрытая инфраструктура приложения или отдельная загрузка значков.
Установите закреплённый пресет EC.
Сохраните index.html, ecl.css и ecl-app.js вместе.
Запустите сервер в этой папке и проверьте переключение отдельных панелей и всех сразу.
Повторите проверку с клавиатуры, на узком экране и при отключённом JavaScript.
Упростите проверку обновлений компонентов
Europa Component Library Примеры компонентов дизайн-системы Europa
ecl-index.html — полный исходный код
Полная разметка компонента, контент, встроенные индикаторы и пути к ресурсам пресета.
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 под именем index.html, а имена остальных предоставленных файлов оставьте без изменений.
ecl-app.js — полный исходный код
Нативная инициализация и групповое управление по событиям; исходный HTML остаётся читаемым.
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 под именем index.html, а имена остальных предоставленных файлов оставьте без изменений.
04
Europa Component Library Настройка агента для дизайн-системы Europa
Отправная точка для реализации
Откройте http://localhost:8000/. В примере используется пресет EC; дополнительно загружать значки или шрифты не требуется.
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
Запрос для вашего проекта
Промпт для AI-агента
Реализуйте предоставленный бриф по аккордеону ECL EC 4.11.2, используя все три полных файла. Сохраните нативные связи кнопок и панелей, подсчёт на основе onToggle, логику группового раскрытия и сворачивания, активацию кнопок с клавиатуры, возможность читать без JavaScript и явное указание на оригинальный демонстрационный контент. Не представляйте пример как официальный сервис ЕС или формальную подачу.
05
Europa Component Library Источники и область применения дизайн-системы Europa
Руководство по приложению OpenDesign для ECL EC 4.11.2. Оригинальные демонстрационные заметки и компоновка страницы не относятся к сервису Европейской комиссии, программе финансирования или юридическому требованию.
