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

Дизайн-система Singapore Government Выберите актуальное семейство SGDS

Веб-компоненты и страницы на основе старого Bootstrap

В SGDS v 3 используется @govtechsg/sgds-web-component. Его пользовательские элементы, токены темы и актуальный способ интеграции утилит отличаются от подхода, основанного на таблице стилей старого @govtechsg/sgds Bootstrap. Не смешивайте инструкции для v 2 JavaScript с тегами v 3: новые элементы управления не смогут инициализироваться.

В образце используется фактический браузерный пакет версии 3.29.0 для регистрации переключателей количества и кнопок. Он демонстрирует авторский планировщик для общественного семинара без шапки сайта Правительства Сингапура и заявлений о принадлежности к нему. Элементы управления меняют только локальные значения; сценария бронирования или оплаты нет.

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Токены темы имеют несколько уровней

Примитивные цвета и их семантическое применение

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

В примере для фона документа, текста, границы и приглушённой панели используются семантические свойства. Поэтому переключение sgds-night-theme у корневого элемента обновляет и пользовательские элементы, и окружающую их композицию. Абзац с жёстко заданным чёрным цветом нарушил бы эту связь, хотя сами элементы управления всё равно переключались бы правильно.

Фиолетовая палитра — опубликованный стандартный вариант оформления продукта, а не повод выдавать себя за государственное ведомство. Для использования идентичности ведомства и утверждённой шапки требуется отдельное разрешение.

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Адаптивная типографика с реальными значениями

Читайте значения из поставляемого токена, а не из краткой таблицы соотношений

В текущем responsive.css для heading-xl заданы размеры 32, 36 и 40px в трёх диапазонах, а соответствующая высота строки составляет 40, 44 и 48px. Значения меняются на границах 1024 и 1440px. Эти границы не зависят от меньших точек перехода сетки — 512 и 768px. Для body-md размер остаётся равным 16px.

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

Для фирменного оформления предназначен шрифт Inter; в документации по настройке указаны начертания 300, 400, 600 и 700. В локальном примере вместо него явно используется Arial, удалённые шрифты не загружаются. Внедряя систему в сервис, загрузите выбранный шрифт и протестируйте его, а не полагайтесь лишь на семейство шрифтов CSS.

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Разные роли интервалов

Не сводите все отступы к одной шкале

В шкалу базовых отступов входят значения 2px, а также 4, 8, 12, 16px и больше. Поверх этих базовых значений заданы псевдонимы фиксированных интервалов и адаптивных интервалов для макета, компонентов и текста. Значение базового layout-gap-md меняется с 16 на 24 и затем на 32px, а text-gap-md — с 12 на 16 и остаётся равным 16px. Поэтому слово «средний» не всегда означает одно и то же числовое значение.

Планировщик ограничен максимальной шириной 888px, чтобы две небольшие области содержимого — элементы управления количеством и текущий план — помещались рядом. При ширине меньше 768px они располагаются друг под другом. Это композиционное решение приложения, а не утверждение, что стандартная сетка SGDS всегда ограничена шириной 888px. Более широкие правила стандартных контейнеров приведены отдельно в справочнике.

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Элемент управления количеством с ограничениями

Используйте количество, а не идентификатор

Переключатель количества подходит для небольшого значения, которое человек может менять по единице за раз. В примере задаются значения от 1 до 5 участников и от 0 до 3 общих комплектов материалов. Это ограничения для демонстрации; в реальном сервисе их нужно определять на основе фактической доступности или правил и указывать в подсказке. Для почтовых индексов, идентификаторов и точных денежных сумм нужны другие поля ввода.

Встроенный компонент объединяет кнопки уменьшения и увеличения с иконками вокруг числового поля ввода. Параметры min, max и step имеют числовой тип, value отражает текущее количество, а label и hintText задают контекст. При достижении граничного значения соответствующая кнопка становится недоступной; при ручном вводе всё равно нужна проверка ограничений.

Параметр hasFeedback принимает значение string, text или both. В примере используются оба варианта и задано конкретное сообщение invalidFeedback. Если задать hasFeedback как логическое значение по образцу другого компонента API, точная конфигурация будет утрачена.

<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>

Справочник по коду

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Синхронизируйте сводку

Два пути событий и один источник данных

Сводка считывает значение каждого пользовательского элемента. Она обрабатывает события sgds-input и sgds-change, поскольку ввод текста и подтверждённое изменение кнопками не обязательно проходят по одному и тому же пути событий. В первом локальном примере проверяли только ввод текста, поэтому обновления после нажатия кнопок изменения значения остались незамеченными; в итоговом примере обрабатываются оба события.

Кнопка Check plan вызывает reportValidity для обоих встроенных элементов и выводит локальное сообщение о состоянии. Некорректное число не преобразуется в правдоподобную сумму. Сброс присваивает пользовательским элементам начальные значения и очищает отображаемое приложением состояние ошибки с помощью setInvalid(false), затем обновляет сводку после updateComplete.

Отключённое поле не эквивалентно полю только для чтения: первое не включается в отправляемую форму, а второе сохраняет своё значение. Если в реальном сервисе подтверждённое количество нужно зафиксировать для проверки, используйте соответствующее состояние, а не отключайте поле лишь ради серого оформления.

• Используйте sgds-input и sgds-change, если сводка должна обновляться и при вводе текста, и при нажатии кнопок изменения значения.
• Считывайте value из пользовательского элемента, а не обращайтесь напрямую к его shadow DOM.
• Отделяйте локальную обратную связь о корректности данных от успешного бронирования или отправки формы.

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Стили до регистрации

Загрузите цепочку зависимостей темы

В приложении со сборкой импортируйте day.css, night.css и css/sgds.css именно в таком порядке, а затем один раз импортируйте библиотеку компонентов. Файлы day/night импортируют root.css, который, в свою очередь, импортирует responsive.css. Файл базовых стилей импортирует reboot.css и grid.css. При статическом копировании необходимо сохранить эти относительные зависимости, а не только первые три файла.

Официальный utility.css — файл конфигурации Tailwind CSS версии 4. Он должен обрабатываться настроенной сборкой Tailwind; подключение его как обычной таблицы стилей браузера не создаёт все классы sgds: utility. В этом примере используются обычная компоновка CSS и семантические пользовательские свойства, поэтому наличие сборки утилит не предполагается.

Для изолированного примера в браузере опубликован файл index.umd.min.js. В метаданных пакета по-прежнему упоминается index.umd.js, однако в проверенном дистрибутиве этого файла нет. В локальном предпросмотре используется реально существующий минифицированный пакет; в инструкции по настройке через npm приведён документированный импорт пакета для сборщиков.

1. Зафиксируйте версию 3.29.0 и импортируйте токены темы до базовых стилей.
2. Подключите Inter или осознанно выберите и протестируйте запасной шрифт.
3. Зарегистрируйте пользовательские элементы один раз, при необходимости дождитесь их определения, а затем добавьте обработчики событий приложения.

Прочитать вспомогательную спецификацию

Дизайн-система Singapore Government Проверяйте граничные значения вместе с темой

Граничные значения помогают выявить ошибки интеграции

Дважды нажмите кнопку Participants и проверьте, что и элемент управления, и сводка показывают 3. Введите 9 вручную и нажмите Check plan: компонент должен показать сообщение о выходе за допустимый диапазон, а статус — предложить исправить значение. Замените его на 5 и убедитесь, что кнопка увеличения отключена, а значение остаётся допустимым.

После ввода количеств переключите тему на ночную и убедитесь, что значения сохранились, сводка остаётся читаемой, а граничные значения по-прежнему обрабатываются правильно. Сбросьте значения и повторите проверку с клавиатуры: клавиша Tab должна перемещать фокус к полю и кнопкам в логичном порядке, а клавиши Enter и Space — активировать кнопку в фокусе.

Локальный тест проверяет работу компонентов при ширине 1440, 768 и 390px, а также локальную доступность зависимостей темы. Он не подтверждает поддержку браузеров и соответствие требованиям доступности будущего государственного сервиса. В таком сервисе необходимо протестировать весь сценарий, формулировки, настройку темы и обработку данных.

Прочитать вспомогательную спецификацию

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

<sgds-quantity-toggle
  id="people" name="people" label="Participants"
  hintText="Choose 1 to 5 participants"
  min="1" max="5" step="1" value="1"
  hasFeedback="both"
  invalidFeedback="Enter a whole number from 1 to 5">
</sgds-quantity-toggle>
<output id="participant-total">1</output>
<script>
  customElements.whenDefined('sgds-quantity-toggle').then(() => {
    const quantity = document.querySelector('#people');
    const update = () => {
      document.querySelector('#participant-total').textContent = String(quantity.value);
    };
    ['sgds-input', 'sgds-change'].forEach(name => {
      quantity.addEventListener(name, update);
    });
  });
</script>

npm install --save-exact @govtechsg/[email protected]

/* globals.css — tokens before foundation rules */
@import "@govtechsg/sgds-web-component/themes/day.css";
@import "@govtechsg/sgds-web-component/themes/night.css";
@import "@govtechsg/sgds-web-component/css/sgds.css";
/* Only for a configured Tailwind CSS v4 build: */
/* @import "@govtechsg/sgds-web-component/css/utility.css"; */

// main.js — register custom elements once
import '@govtechsg/sgds-web-component';

// Enable the published night theme; omit class for day.
document.documentElement.classList.toggle('sgds-night-theme');

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>SGDS quantity specimen</title><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/day.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/themes/night.css"><link rel="stylesheet" href="vendor/sgds-3.29.0/css/sgds.css"><style>:root{--sgds-font-family-brand:Arial,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--sgds-bg-default);color:var(--sgds-color-default);font-family:var(--sgds-font-family-brand)}main{max-width:888px;margin:auto;padding:32px 20px}h1{font-size:var(--sgds-font-size-heading-xl);line-height:var(--sgds-line-height-xl);letter-spacing:var(--sgds-letter-spacing-tight)}h2{font-size:var(--sgds-font-size-heading-sm);line-height:var(--sgds-line-height-sm)}p{max-width:60ch;line-height:1.5}.eyebrow{color:var(--sgds-color-subtle);font-size:14px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:var(--sgds-layout-gap-md);margin:32px 0}.control{border:1px solid var(--sgds-border-color-default);border-radius:var(--sgds-border-radius-md);padding:24px;background:var(--sgds-bg-alternate)}sgds-quantity-toggle{display:block;max-width:100%}dl{margin:24px 0}dt{color:var(--sgds-color-subtle)}dd{margin:0 0 16px;font-weight:600}.actions{display:flex;flex-wrap:wrap;gap:16px}#status{min-height:24px}button.native{font:inherit;background:transparent;border:1px solid var(--sgds-border-color-default);color:inherit;padding:8px 12px;border-radius:8px}button.native:focus-visible{outline:3px solid var(--sgds-primary-border-color-default);outline-offset:3px}@media(max-width:767px){.layout{grid-template-columns:1fr}.control{padding:20px}}</style><main><p class="eyebrow">Independent specimen · Community workshop planning</p><h1>Plan a small workshop group</h1><p>Adjust two bounded quantities and inspect the local summary. This example does not reserve places or equipment.</p><button class="native" id="theme" aria-pressed="false">Night theme</button><div class="layout"><section class="control"><h2>People and materials</h2><form id="planner"><sgds-quantity-toggle id="people" name="people" label="Participants" hintText="Choose 1 to 5 participants" min="1" max="5" step="1" value="1" hasFeedback="both" invalidFeedback="Enter a whole number from 1 to 5"></sgds-quantity-toggle><div style="height:24px"></div><sgds-quantity-toggle id="kits" name="kits" label="Shared material kits" hintText="Choose 0 to 3 kits" min="0" max="3" step="1" value="0" hasFeedback="both" invalidFeedback="Enter a whole number from 0 to 3"></sgds-quantity-toggle></form></section><section><h2>Current plan</h2><dl><dt>Participants</dt><dd id="p-value">1</dd><dt>Material kits</dt><dd id="k-value">0</dd></dl><p>These are demonstration limits. A real service should explain its own availability and eligibility rules.</p><div class="actions"><sgds-button id="review">Check plan</sgds-button><sgds-button id="reset" variant="outline">Reset</sgds-button></div><p id="status" role="status" aria-live="polite"></p></section></div></main><script src="vendor/sgds-3.29.0/index.umd.min.js"></script><script type="module">await Promise.all(['sgds-quantity-toggle','sgds-button'].map(x=>customElements.whenDefined(x)));const p=document.querySelector('#people'),k=document.querySelector('#kits'),status=document.querySelector('#status');await Promise.all([p.updateComplete,k.updateComplete]);const update=()=>{document.querySelector('#p-value').textContent=String(p.value);document.querySelector('#k-value').textContent=String(k.value);status.textContent=''};[p,k].forEach(x=>['sgds-input','sgds-change'].forEach(name=>x.addEventListener(name,update)));document.querySelector('#review').onclick=()=>{const validP=p.reportValidity(),validK=k.reportValidity();status.textContent=validP&&validK?'The quantities are within the demo limits. Nothing has been reserved.':'Correct the highlighted quantity before continuing.'};document.querySelector('#reset').onclick=async()=>{p.value=1;k.value=0;p.setInvalid(false);k.setInvalid(false);await Promise.all([p.updateComplete,k.updateComplete]);update()};document.querySelector('#theme').onclick=e=>{const night=document.documentElement.classList.toggle('sgds-night-theme');e.currentTarget.setAttribute('aria-pressed',String(night));e.currentTarget.textContent=night?'Day theme':'Night theme'};window.demoReady=true;</script></html>