Дизайн-система Queensland Government.

Выберите способ внедрения дизайн-система Queensland Government для Квинсленда

Точно укажите среду выполнения

В документации Квинсленда описано несколько способов внедрения. В этом примере используется публичный пакет @qld-gov-au/qgds-bootstrap5 версии 2.4.1 и его поведение модального окна Bootstrap. Здесь не утверждается, что пример работает с более новой веткой веб-компонентов Lit. Указание названия реализации и версии помогает не перепутать компоненты с похожими названиями, но несовместимыми правилами инициализации.

Отделяйте стабильные примеры от разрабатываемых веток

В официальном репозитории веб-компонентов текущая ветка помечена как alpha, а более старый вариант Vanilla — отдельная реализация для справки. В исполняемом примере используется один проверенный путь на основе Bootstrap. Перед будущим переходом следует заново проверить разметку, названия токенов и контракты компонентов, а не просто заменить URL таблицы стилей.

Роли темы дизайн-система Queensland Government и иллюстрации ресурсов

Сопоставляйте светлые и тёмные роли

Таблица параметров содержит парные роли для светлой и тёмной темы из реального пакета. Основные действия, цвета ссылок, фокуса и текста меняются в зависимости от контекста поверхности. В текущем наборе ресурсов используется светлая композиция; тёмные значения приведены для справки и не означают, что на странице есть переключатель темы.

Используйте иллюстрации, не придумывая фирменные токены

На каждой карточке изображён оригинальный документ с номером. Четыре приглушённых фона иллюстраций помогают различать созданные для примера типы ресурсов. Эти цвета и внешний радиус карточек 8px относятся к стилю приложения и указаны отдельно от опубликованной таблицы ролей. Библиотека предоставляет настоящие кнопки, оформление флажков и модального окна, на которых основан интерфейс.

Масштаб текста и содержимое карточек дизайн-система Queensland Government

Подключите стандартный шрифт основного текста

Для основного текста пакет использует шрифт без засечек размером 1rem и межстрочным интервалом 1.5. В предварительном просмотре локально загружается Noto Sans, поэтому результат не зависит от запроса к Google Fonts. Заголовки, описания и счётчик выбранных ресурсов остаются удобочитаемыми и при переходе карточек в один столбец.

Добавьте полезное описание к каждому ресурсу

В каждой карточке указаны тип, примерная продолжительность чтения, конкретное название и краткое назначение ресурса. Указанная длительность — оценка для семинара, а не аналитика использования. В подписи флажка повторяется название ресурса, чтобы действие было понятно пользователю вспомогательных технологий и вне контекста карточки. Вся карточка не превращается в неоднозначную область для нажатия.

Выбор флажками и отображение результатов дизайн-система Queensland Government

Отключайте действие проверки, если ничего не выбрано

Независимые флажки позволяют выбрать любое сочетание из четырёх ресурсов. В Set хранятся индексы выбранных ресурсов; счётчик и список для проверки формируются из этого состояния. Пока Set пуст, действие проверки выбора отключено. Так не открывается диалог без полезного содержимого, а видимый нулевой счётчик объясняет причину.

• Используйте независимые флажки для списка ресурсов с множественным выбором.
• Рассчитывайте счётчик выбранных ресурсов по тем же данным, что и содержимое диалога.
• Указывайте название ресурса в подписи каждого флажка.

Сбрасывайте устаревшее подтверждение после любого изменения

Диалог проверки и возврат фокуса дизайн-система Queensland Government

Используйте стандартное модальное окно для проверки выбора

Экземпляр Modal Bootstrap открывает диалог с заголовком в качестве подписи. В основной части перечислены выбранные ресурсы; действия позволяют продолжить редактирование или подтвердить выбор локально. Диалог закрывается клавишей Escape или кнопкой закрытия. При срабатывании стандартного события hidden приложение возвращает фокус к действию «Проверить выбор».

Избегайте лишних гонок при переходах

В примере не используется необязательный класс fade. Поэтому быстрое подтверждение или нажатие Escape сразу закрывает диалог, а не игнорируется во время перехода появления. Модальное окно по-прежнему управляет фокусом и отображением затемнённого фона. Анимация не должна быть необходимой для понимания того, применилось ли действие проверки.

Дизайн-система Queensland Government Полная реализация набора ресурсов

Воссоздайте локальную демонстрацию в точности

Создайте проект Vite на чистом JavaScript и установите закреплённую версию пакета QGDS Bootstrap с помощью Bootstrap и Noto Sans. Используйте экспортированный пакетом путь qld.bootstrap.css, а не предположительный глубоко вложенный импорт из dist. Сохраните полный файл точки входа и queensland.css вместе с корневым элементом для монтирования. Исходный код включает все записи ресурсов, оригинальные SVG-иллюстрации, логику выбора и переходы модального окна.

1. Установите закреплённую версию пакета QGDS Bootstrap и общедоступный шрифт.
2. Используйте экспортированный путь к таблице стилей, полный файл точки входа и CSS.
3. Выберите два ресурса и проверьте Escape и возврат фокуса.
4. Подтвердите выбор локально, измените его и убедитесь, что прежний результат сброшен.

Продумайте переходы и правила управления фокусом в модальном окне

В варианте QGDS Bootstrap используется Bootstrap Modal, поэтому закрытие должно соответствовать штатному жизненному циклу модального окна. Возвращайте фокус к кнопке Review selection после события hidden.bs.modal, а не по произвольно выбранной задержке. Если позже добавите fade, учитывайте длительность перехода: немедленный запрос на закрытие во время открытия может быть проигнорирован.

При открытии модального окна формируйте список для проверки на основе текущего выбора, а изменение флажка должно аннулировать предыдущее локальное подтверждение. Клавиша Escape закрывает окно проверки, не меняя выбор. Если отделить флажки от иллюстраций карточек, действия по всему элементу не будут конфликтовать с выбором, а для каждого ресурса можно задать точную доступную подпись.

Дизайн-система Queensland Government Примеры компонентов дизайн-системы

import Modal from 'bootstrap/js/dist/modal';
import '@qld-gov-au/qgds-bootstrap5/qld.bootstrap.css';
import '@fontsource/noto-sans/latin-400.css';
import '@fontsource/noto-sans/latin-700.css';
import './queensland.css';
const resources=[['Conversation planner','A short structure for a useful team discussion.','Guide','10 min'],['Observation notes','Capture what happened before interpreting why.','Worksheet','15 min'],['Decision record','Keep a reasoned account of the choice and its limits.','Template','10 min'],['Review checklist','Check content, keyboard behavior and narrow layouts.','Checklist','20 min']];document.getElementById('root').innerHTML=`<main><p class="eyebrow">QUEENSLAND DESIGN SYSTEM / ORIGINAL RESOURCE STUDY</p><h1>Build a workshop resource pack</h1><p class="lead">Choose useful sample resources, then review your local selection. No files are requested or sent.</p><div class="selection-bar"><p id="count" role="status">0 resources selected</p><button id="review" class="btn btn-primary" disabled>Review selection</button></div><div class="resource-grid">${resources.map(([title,desc,type,time],i)=>`<article class="resource-card"><div class="art art-${i}" aria-hidden="true"><span>${String(i+1).padStart(2,'0')}</span><svg viewBox="0 0 160 90"><rect x="20" y="10" width="120" height="70" rx="4"/><path d="M38 30h84M38 45h58M38 60h70"/></svg></div><div class="card-body"><p class="meta">${type} · ${time}</p><h2>${title}</h2><p>${desc}</p><div class="form-check"><input class="form-check-input" type="checkbox" value="${i}" id="resource-${i}"><label class="form-check-label" for="resource-${i}">Add ${title.toLowerCase()}</label></div></div></article>`).join('')}</div><div id="review-modal" class="modal" tabindex="-1" aria-labelledby="review-heading" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-header"><h2 id="review-heading" class="modal-title fs-4">Review your resource pack</h2><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close review"></button></div><div class="modal-body"><p>These original resources form a local planning list.</p><ul id="review-list"></ul><p class="small">This preview does not produce files or contact a service.</p></div><div class="modal-footer"><button class="btn btn-secondary" data-bs-dismiss="modal">Keep editing</button><button id="confirm" class="btn btn-primary">Confirm local list</button></div></div></div></div><section id="result" hidden role="status"><h2>Local list ready</h2><p id="result-text"></p><button id="clear" class="btn btn-secondary">Clear the list</button></section></main>`;const selected=new Set();const $=id=>document.getElementById(id);const modal=new Modal($('review-modal'));document.querySelectorAll('.form-check-input').forEach(input=>input.addEventListener('change',()=>{const i=Number(input.value);input.checked?selected.add(i):selected.delete(i);$('count').textContent=selected.size+' resource'+(selected.size===1?'':'s')+' selected';$('review').disabled=!selected.size;$('result').hidden=true}));$('review').addEventListener('click',()=>{$('review-list').replaceChildren(...[...selected].sort().map(i=>{const li=document.createElement('li');li.textContent=resources[i][0];return li}));modal.show()});$('review-modal').addEventListener('hidden.bs.modal',()=>$('review').focus());$('confirm').addEventListener('click',()=>{$('result-text').textContent=[...selected].sort().map(i=>resources[i][0]).join(', ')+'. Your selection is held only until this page reloads.';$('result').hidden=false;modal.hide()});$('clear').addEventListener('click',()=>{selected.clear();document.querySelectorAll('.form-check-input').forEach(i=>i.checked=false);$('count').textContent='0 resources selected';$('review').disabled=true;$('result').hidden=true;document.querySelector('.form-check-input').focus()});

body{margin:0}main{max-width:1200px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.04em}h1{max-width:26ch}.lead{max-width:65ch}.selection-bar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;border-bottom:1px solid #ccc;margin-bottom:24px}.selection-bar p{margin:0;font-weight:700}.resource-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.resource-card{border:1px solid #ccc;border-radius:8px;overflow:hidden}.card-body{padding:24px}.card-body h2{font-size:24px;line-height:1.3}.meta{font-size:14px}.art{height:130px;display:flex;align-items:center;justify-content:space-between;padding:24px;background:#eaf4f7;color:#005e85}.art-1{background:#eef3ea;color:#3b6738}.art-2{background:#f4eef7;color:#6b427b}.art-3{background:#faf0e4;color:#8c592b}.art span{font-size:36px;font-weight:700}.art svg{width:160px;height:90px;fill:none;stroke:currentColor;stroke-width:3}.form-check{margin-top:24px}.modal-title{margin:0}.modal li{margin:12px 0}#result{margin-top:32px;padding:24px;background:#eef5f3;border-left:4px solid #20775b}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.resource-grid{grid-template-columns:1fr}.selection-bar{align-items:start;flex-direction:column}.art{height:110px}h1{font-size:34px}}