Создайте объёмное руководство в стиле Ontario с реальной типографикой, опубликованными значениями отступов и цветов, встроенным поведением аккордеона и полным исходным кодом для соответствующей версии.
Опубликованы Ontario 9.1.0 CSS и скрипт аккордеона; добавлены локальные шрифты, оригинальное содержимое и обработчик связанного раскрытия. · Справочник по реализации
02
Дизайн-система Ontario Справочник по дизайну
Дизайн-токены Ontario и complete-styles 9.1.0; фактические пути экспортов пакета, SCSS аккордеона и опубликованный скрипт проверены локально.
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-font-sizes-standard-body-text
1rem
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-font-sizes-large
1.25rem
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-font-sizes-x-large
1.5rem
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-breakpoints-small
40em
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-breakpoints-medium
73em
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-grid-columns-total-columns
12
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-grid-columns-row-width
1152
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
--ontario-grid-columns-column-gutter
32
Опубликованное значение токена; значения сетки без единиц измерения описывают исходную систему, и их нужно интерпретировать в контексте соответствующей реализации сетки.
03
Дизайн-система Ontario Полное руководство
Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.
DESIGN-ontario.md
Подробные рекомендации, отправная точка для реализации и ссылки на источники.
Дизайн-система Ontario Экспорты пакета и стили компонентов
Используйте полный пакет стилей осознанно
В примере зафиксирована версия @ongov/ontario-design-system-complete-styles 9.1.0 и используется опубликованный скрипт раскрытия и сворачивания. Это реализация на основе HTML/CSS, а не отдельная среда выполнения веб-компонентов Ontario. Карта экспортов пакета предоставляет скомпилированную тему по пути styles/css/compiled/ontario-theme.min.css; в современном сборщике не сработает предположительный глубокий импорт с дополнительным префиксом dist.
Подключите стили аккордеона
В проверенном пакете версии 9.1.0 скомпилированная тема не содержит селекторов аккордеона, которые используются в этом примере. Поэтому страница подключает правила, скомпилированные из собственного файла пакета ontario-accordion.scss, входящего в предоставленный CSS. Скрипт скопирован из опубликованного каталога dist/scripts, поскольку этот глубокий путь JavaScript не экспортируется. Это конкретные требования к сборке, а не необязательная визуальная полировка.
Дизайн-система Ontario Типографика и иерархия Ontario
Сохраняйте предусмотренное сочетание шрифтов
В опубликованной теме для заголовков используется Raleway Modified, а для обычного текста — Open Sans. В предварительный просмотр включены начертания 400 и 700, используемые на странице. Это позволяет сохранить характерную форму заголовков и не зависеть от удалённых шрифтов. Проверять типографику следует после загрузки шрифтов: при отображении шрифтами-заменителями могут измениться переносы строк и относительная насыщенность заголовков аккордеона.
Упростите обзор этапов
Заголовок обозначает задачу, вводный текст объясняет, как пользоваться руководством, а заголовки трёх этапов задают чёткую последовательность. Внутри каждой панели размещены поясняющие абзацы и списки. Примечание рядом остаётся видимым: важная информация о вступлении в группу и доступе не должна зависеть от того, догадается ли человек открыть скрытую панель. Иерархия — часть модели контента, а не повод превращать каждое предложение в заголовок.
Дизайн-система Ontario Цветовые роли и признаки компонентов
Разделите функции ссылок и фокуса
В экспортированной палитре для ссылок используется цвет #0066CC, а для состояний при наведении, активации и посещения заданы отдельные цвета. Для фокуса используется #009ADB. В аккордеоне сочетаются видимая подпись, направленная иконка и состояние раскрытия; одного синего текста недостаточно, чтобы объяснить его поведение. Серая граница разделяет этапы, не превращая каждый абзац в отдельную карточку.
Используйте опубликованную шкалу отступов
Таблица отступов включает значения от нуля до пяти ремов и именованные промежуточные шаги. В примере использована авторская двухколоночная компоновка с официальными правилами компонента. Точка адаптации 760px выбрана для композиции этого встроенного руководства и не обозначена как новая точка адаптации Ontario. Официальные точки адаптации отдельно приведены в справочной таблице.
Дизайн-система Ontario Структура и состояние аккордеона
Свяжите каждую кнопку с её содержимым
Для каждого этапа предусмотрен заголовок с настоящей кнопкой. Атрибут aria-controls указывает на единственную секцию содержимого с уникальным идентификатором, а aria-expanded описывает, открыта ли эта секция. В содержимом есть ссылка на кнопку через aria-labelledby. Встроенный скрипт синхронизирует классы компонента и атрибут aria-hidden при открытии и закрытии панели. Повторяющийся ID нарушит эту связь, даже если визуально макет выглядит правильно.
Используйте уникальные идентификаторы кнопок и содержимого.
Согласуйте разметку с логикой видимости в скрипте для выбранной версии.
Синхронизируйте элементы управления всеми этапами
Дизайн-система Ontario Ссылка на начальный этап и важная информация
Открывайте этап настоящей кнопкой
Ссылки на боковой панели указывают на этап, а если он закрыт — вызывают его встроенную кнопку. После открытия фокус перемещается на кнопку. Благодаря этому атрибут expanded у кнопки, класс заголовка и видимость содержимого меняются согласованно. Дополнительный обработчик относится к коду приложения; он приведён полностью, чтобы читатель мог воспроизвести поведение.
Добавляйте полезную информацию, которую стоит раскрыть
Три подготовленных этапа посвящены подготовке, материалам и дальнейшим действиям для небольшого семинара. В каждом указаны конкретные действия и пояснён охват примера. В настоящем приглашении цель мероприятия, условия доступа и сведения о подключении всё равно должны быть указаны напрямую. Этот шаблон помогает структурировать подробное руководство; не следует скрывать важную информацию только ради того, чтобы сделать страницу короче.
Дизайн-система Ontario Полный исходный код и проверка
Воспроизведите пример для выбранной версии
Создайте проект Vite на чистом JavaScript, установите закреплённый пакет complete-styles и скопируйте его скрипт раскрытия и сворачивания в src. Сохраните переданные main.js и ontario.css, не удаляя корневой элемент монтирования. CSS включает официальные правила аккордеона, скомпилированные для этого выпуска, и чётко отмеченные авторские правила макета. Для этой реализации HTML не нужны ни регистрация компонентов, ни серверная служба.
Установите закреплённый пакет complete-styles.
Скопируйте его скрипт раскрытия и сворачивания и сохраните полный файл входной точки и CSS.
Раскройте все панели, затем сверните их и откройте один из этапов по ссылке.
Проверьте фокус клавиатуры, атрибуты expanded и отображение на телефоне.
Проверьте поведение ссылок и групповых команд
Проверьте открытие каждого этапа, сворачивание всех панелей и повторное открытие среднего этапа по ссылке на боковой панели. Убедитесь, что состояние expanded кнопки соответствует видимости содержимого. Повторите проверку на экране телефона, где боковая панель располагается после руководства. Локальная проверка также подтверждает загрузку шрифтов, отсутствие горизонтальной прокрутки и ошибок браузера при работе встроенного скрипта.
Полный авторский контент, импорт опубликованного скрипта и поведение при открытии по ссылке.
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()}));
Для этого закреплённого выпуска необходимы и скомпилированная тема, и таблица стилей для компонента аккордеона.
04
Дизайн-система Ontario Настройка агента
Отправная точка для реализации
В предварительном просмотре используется тот же опубликованный скрипт аккордеона и локальные файлы шрифтов. В примере не загружается отдельная библиотека веб-компонентов.
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
Запрос для вашего проекта
Промпт для AI-агента
Создайте руководство по семинару Ontario на основе complete-styles 9.1.0 и соответствующего ему скрипта аккордеона. Подключите таблицу стилей для компонента аккордеона CSS, настоящие шрифты Raleway Modified и Open Sans, доступные идентификаторы кнопок и содержимого, а также синхронизированное раскрытие и сворачивание. Оставьте важную информацию видимой и направляйте ссылки на этапы через встроенные кнопки.
05
Дизайн-система Ontario Источники и область применения
Руководство по семинару, составленное с помощью OpenDesign и оформленное в стилях Ontario 9.1.0 с опубликованным скриптом раскрытия и сворачивания. Контент и композиция страницы созданы авторами; это не официальная страница сервиса.
