Нативные USWDS 3.14.0 CSS и JavaScript аккордеона; явная локальная замена системного шрифта и собственная фильтрация. · Справочник по реализации
02
Дизайн-справочник дизайн-системы USWDS
Нативный дистрибутив компонентов USWDS 3.14.0. Токены по умолчанию — из официальной документации; замены шрифтов в предпросмотре явно указаны как локальные решения.
Токены по умолчанию — отправная точка для настройки
USWDS разделяет системные токены, настройки темы проекта, классы утилит и компоненты. В приведённой ниже справке указаны настройки темы по умолчанию из текущей документации. Федеральная программа может настроить другие роли шрифтов или псевдонимы цветов, не заменяя при этом все компоненты.
Предварительный просмотр — независимое исследование для сравнения возможностей в сфере исследований с использованием 3.14.0 CSS и аккордеона JavaScript. В нём не используются правительственный баннер и символика. Названия программ и этапы вымышлены, а фильтрация выполняется полностью в браузере.
Ориентируйтесь на единицу измерения, а не на число
Одна единица отступа USWDS равна 8px: units(2) означает 16px, а units(3) — 24px. Половинные токены позволяют задавать меньшие интервалы, а в записи утилиты для половины единицы используется 05. Утилита margin-2 не задаёт отступ в два пикселя.
В шкалу также входят именованные ширины, например tablet и desktop. Это повторно используемые токены, а не требование перерабатывать каждую страницу для каждого размера. В примере для размещения содержимого используется grid-container, а для таблицы — отдельная прокручиваемая область с фокусом.
По умолчанию токен sans соответствует Source Sans Pro, а serif — Merriweather. Для ролей body и UI задано семейство sans, для heading — serif. Функция family("body") разрешает эту цепочку. При описании проекта различайте семантическую роль и итоговое семейство шрифтов.
В локальном примере для основного текста явно заданы Helvetica/Arial, а для заголовков — Georgia, поэтому загружать шрифты не требуется. Это переопределение для исследования, а не стандартная типографическая система USWDS. В рабочей сборке эти роли следует настроить через параметры uswds-core или скопировать поставляемые файлы шрифтов.
По умолчанию псевдоним основного цвета соответствует blue-60v, #005ea2. Псевдоним primary-dark соответствует blue-warm-70v, #1a4480, а ink — gray-90, #1b1b1b. Это значения темы, а не требование использовать один и тот же фирменный цвет на каждом сайте USWDS.
Для оформления действия или заголовка используйте семантический псевдоним, а токен системного цвета — только если именно это решение принято при проектировании. Изменить псевдоним основного цвета в настройках проще и надёжнее, чем заменять каждую совпадающую шестнадцатеричную запись в скомпилированном CSS.
USWDS: сопоставление возможностей в дизайн-системе
Сохраняйте семантику таблицы
В примере используются подпись таблицы, заголовки столбцов с атрибутом scope="col" и название возможности с атрибутом scope="row". Это таблица, потому что читатели сравнивают одни и те же поля — тематику и этап — в разных записях. Эти связи сохраняются и при прокрутке области.
У прокручиваемой обёртки задан tabindex="0", чтобы пользователь клавиатуры мог перейти к ней. Широкие данные остаются в этой области и не растягивают весь документ. В примере используются обычные текстовые ячейки; для отсутствующих данных программы нужно предусмотреть явное состояние содержимого, а не подставлять выдуманное число.
В USWDS сортируемые заголовки поддерживаются атрибутом data-sortable. Для сортируемой таблицы также нужен usa-table__announcement-region с aria-live="polite". Для числовых данных может потребоваться data-sort-value, чтобы отформатированная сумма сортировалась как значение, а не по алфавиту. В этом сравнении сортировка не включена: демонстрация предназначена для фильтрации по тематике в трёх строках.
USWDS: требования в раскрывающихся блоках дизайн-системы
Свяжите идентификаторы кнопки и панели
У каждой usa-accordion__button атрибут aria-controls указывает на связанную с ней usa-accordion__content. Встроенный механизм JavaScript обновляет aria-expanded и видимость. Модификатор с рамкой меняет оформление контейнера; data-allow-multiple позволяет одновременно раскрыть несколько разделов.
Кнопка находится внутри заголовка, чтобы структура содержимого оставалась понятной. Требования, по которым пользователь решает, подходит ли ему программа, следует показывать до раскрывающегося блока. Здесь панели содержат дополнительные рекомендации по подготовке и пояснение к вымышленному набору данных.
Заголовок описывает тему панели.
Кнопка содержит состояние раскрытия и целевой идентификатор.
Идентификатор панели остаётся неизменным при изменении её видимости.
Установите @uswds/[email protected] и скопируйте каталог dist, сохранив структуру папок css, js, img и fonts. Таблица стилей использует относительные пути к значкам и шрифтам. Иначе страница может выглядеть почти правильно, но на ней не отобразятся символы раскрывающихся блоков или нужные шрифты.
Подключите uswds-init.min.js в секции head, затем таблицу стилей, а uswds.min.js — после разметки body. Библиотека включает поддержку аккордеона. Поле поиска и фильтр по тематике ниже реализованы на уровне приложения и не обращаются к удалённому сервису поиска.
USWDS: фильтрация и восстановление исходного состояния дизайн-системы
Запрос должен показывать результат
Для элементов управления используются стандартные стили label, input, select и button; приложение сопоставляет запрос и выбранную тематику с тремя вымышленными записями. Количество результатов выводится в области с вежливым оповещением. Если совпадений нет, отображаются пояснение и кнопка сброса; введённый запрос сохраняется.
В демонстрации намеренно разделены поиск возможностей и подача заявки. Раскрытие материалов для подготовки не создаёт черновик и не отмечает требование как выполненное. Для настоящей заявки на финансирование потребуются правила конкретной программы, аутентификация и сохранение состояния транзакции.
Выберите категорию «Окружающая среда» и проверьте, какая возможность останется.
Введите фразу без совпадений и нажмите «Сбросить фильтры».
Раскройте обе панели с рекомендациями и проверьте, что их состояния не зависят друг от друга.
Дополнительный аккордеон с рекомендациями по подготовке
Раскрывающийся блок USWDS с явной связью между кнопкой и панелью.
html
<div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
<h3 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button"
aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
</h3>
<div id="preparation" class="usa-accordion__content usa-prose" hidden>
<p>This fictional opportunity asks for a project summary and a named contact.</p>
</div>
</div>
Полный документ включает разметку, элементы управления и инициализацию. Распакуйте связанный архив примера, чтобы получить нужные относительные пути к ресурсам поставщика, затем запустите его через HTTP-сервер.
html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Research opportunities — OpenDesign study</title><script src="vendor/uswds-3.14.0/uswds-init.min.js"></script><link rel="stylesheet" href="vendor/uswds-3.14.0/css/uswds.min.css"><style>body,body *,body *:before,body *:after{font-family:Helvetica,Arial,sans-serif!important}h1,h2{font-family:Georgia,serif!important}body{color:#1b1b1b;margin:0}[hidden]{display:none!important}.study-head{background:#d9e8f6;padding:16px 0;border-bottom:4px solid #005ea2}.study-head p{margin:0}.study-form{display:flex;gap:24px;align-items:end;flex-wrap:wrap}.study-form>div{flex:1;min-width:200px}.study-form .usa-input,.study-form .usa-select{max-width:none}.usa-table{width:100%}.study-main{padding-top:32px;padding-bottom:48px}.usa-table th{min-width:120px}#count{margin-top:24px}.study-note{border-top:1px solid #a9aeb1;margin-top:32px;padding-top:16px;line-height:1.5}</style></head><body><header class="study-head"><div class="grid-container"><p><strong>OpenDesign · USWDS component study</strong><br>Fictional research records. No application is submitted.</p></div></header><main class="grid-container study-main"><h1>Research opportunities</h1><p class="usa-intro">Compare topics and read the preparation notes.</p><form class="study-form" id="filters"><div><label class="usa-label" for="query">Search opportunity names</label><input class="usa-input" id="query" type="search"></div><div><label class="usa-label" for="topic">Topic</label><select class="usa-select" id="topic"><option value="">All topics</option><option>Environment</option><option>Transport</option><option>Education</option></select></div><button type="submit" class="usa-button">Apply filters</button><button type="button" class="usa-button usa-button--outline" id="clear">Clear filters</button></form><p id="count" aria-live="polite">3 opportunities</p><div class="usa-table-container--scrollable" tabindex="0"><table class="usa-table usa-table--borderless"><caption>Illustrative research opportunities</caption><thead><tr><th scope="col">Opportunity</th><th scope="col">Topic</th><th scope="col">Stage</th></tr></thead><tbody><tr data-topic="Environment"><th scope="row">Community water study</th><td>Environment</td><td>Example draft</td></tr><tr data-topic="Transport"><th scope="row">Accessible transport research</th><td>Transport</td><td>Example review</td></tr><tr data-topic="Education"><th scope="row">Local skills survey</th><td>Education</td><td>Example draft</td></tr></tbody></table></div><p id="empty" hidden>No matching opportunities. Broaden the topic or clear the filters.</p><h2>Preparation notes</h2><div class="usa-accordion usa-accordion--bordered" data-allow-multiple>
<h3 class="usa-accordion__heading">
<button type="button" class="usa-accordion__button"
aria-expanded="false" aria-controls="preparation">Before you prepare a draft</button>
</h3>
<div id="preparation" class="usa-accordion__content usa-prose" hidden>
<p>This fictional opportunity asks for a project summary and a named contact.</p>
</div>
<h3 class="usa-accordion__heading"><button type="button" class="usa-accordion__button" aria-expanded="false" aria-controls="scope">What the example data means</button></h3><div id="scope" class="usa-accordion__content usa-prose" hidden><p>Draft and review are demonstration stages. They do not indicate an actual funding programme or eligibility decision.</p></div>
</div><p class="study-note">USWDS 3.14.0 native accordion and styles, with local Helvetica/Georgia font overrides. Filters are original application code. <a href="vendor/uswds-3.14.0/LICENSE.md">Distribution licence</a>.</p></main><script src="vendor/uswds-3.14.0/uswds.min.js"></script><script>const rows=[...document.querySelectorAll('tbody tr')],q=document.getElementById('query'),t=document.getElementById('topic');function filter(){let n=0;for(const row of rows){const show=(!t.value||row.dataset.topic===t.value)&&row.firstElementChild.textContent.toLowerCase().includes(q.value.trim().toLowerCase());row.hidden=!show;if(show)n++}document.getElementById('count').textContent=n+' '+(n===1?'opportunity':'opportunities');document.getElementById('empty').hidden=n!==0;}document.getElementById('filters').addEventListener('submit',e=>{e.preventDefault();filter()});document.getElementById('clear').addEventListener('click',()=>{q.value='';t.value='';filter();q.focus()});</script></body></html>
Скачайте полный пример из раздела «Источники». Точная команда локального запуска приведена в README.
Оставьте пути к ресурсам поставщика относительными к этому документу; архив включает все ресурсы, используемые в предварительном просмотре.
04
USWDS: настройка AI-агента в дизайн-системе
Отправная точка для реализации
Сохраните структуру каталога dist, чтобы CSS мог находить шрифты и значки. Это способ установки предварительно скомпилированного дистрибутива; для настройки темы нужна сборка Sass. ZIP-архив с полным рабочим примером в разделе «Источники» содержит также точные зависимости примера и весь документ. Распакуйте его, выполните python3 -m http.server 8080 в этом каталоге, затем откройте http://localhost:8080/uswds.html. Не открывайте примеры с модулями через file://.
sh / html
npm install @uswds/[email protected]
mkdir -p public/assets/uswds
cp -R node_modules/@uswds/uswds/dist public/assets/uswds/
<!-- HTML head -->
<script src="/assets/uswds/dist/js/uswds-init.min.js"></script>
<link rel="stylesheet" href="/assets/uswds/dist/css/uswds.min.css">
<!-- After the component markup, before closing body -->
<script src="/assets/uswds/dist/js/uswds.min.js"></script>
Запрос для вашего проекта
Промпт для AI-агента
Создайте вымышленную таблицу для сравнения возможностей в сфере исследований с использованием USWDS 3.14.0. Подключите полное дерево ресурсов dist, скрипт инициализации, таблицу стилей компонентов и JavaScript. Представьте сопоставимые записи в семантической таблице с подписью и заголовками столбцов; добавьте поиск с меткой и фильтрацию по категориям, количество результатов, полезное состояние при отсутствии совпадений и сброс фильтров. Используйте стандартные аккордеоны для дополнительных требований, но оставьте важную информацию для сравнения видимой. Сохраните документированные единицы отступов и соответствия ролей темы; обозначьте переопределение системных шрифтов. Не превращайте эту страницу в процесс подачи заявки и не создавайте впечатление, что здесь подтверждаются реальные критерии участия или обязательства по выделению гранта.
05
USWDS: источники и границы дизайн-системы
Независимое исследование компонентов USWDS 3.14.0. Записи о возможностях вымышлены; официальная символика федеральных органов и точка подачи заявок не используются. Helvetica/Arial и Georgia — локальные замены шрифтов, а не шрифтовые ресурсы по умолчанию USWDS.
