Дизайн-система Det Fælles Designsystem.

Тема DKFDS и область реализации дизайн-системы Det Fælles Designsystem

Осознанно выбирайте Borger.dk или Virk

Det Fælles Designsystem распространяет отдельные таблицы стилей для Borger.dk и Virk. В этом примере зафиксирована версия dkfds 11.3.0 и используется таблица стилей Borger.dk, благодаря чему основные элементы управления имеют характерный зелёный цвет, а текст набран шрифтом IBM Plex Sans. Здесь не меняется цвет лишь одной кнопки под видом полной смены темы. Другую тему следует подключать как отдельное осознанное решение при реализации.

Не приписывайте библиотеке исходную логику сортировки

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

Значения Sass и базовый ритм дизайн-системы Det Fælles Designsystem

Читайте карты исходных значений как карты исходных значений

В справочнике указаны фактические значения Sass, а не придуманные имена вида --token. В карте интервалов используется основа 8px; например, ключам 305 и 405 соответствуют 12px и 20px. Разработчикам следует пользоваться вспомогательной функцией библиотеки или соответствующими соглашениями для утилит, а не воспринимать эти числа как значения в пикселях. Таблица параметров наглядно показывает соответствия.

Соблюдайте соглашение о корневом размере шрифта

Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера. Поэтому карта размеров шрифта в исходном коде включает значение 1.6rem для стандартного шага основного текста при обычных настройках браузера. Перенос значения в rem в среду с другим корневым размером шрифта может существенно изменить результат. В примере загружается фактическая таблица стилей, поэтому контекст типографики и интервалов остаётся согласованным.

Семантическая структура таблицы в дизайн-системе Det Fælles Designsystem

Используйте заголовок таблицы и чётко обозначайте назначение столбцов

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

• Добавьте информативный заголовок и заголовки столбцов.
• Храните числовые данные в модели приложения как числа.
• Добавьте метку области прокрутки, доступной с клавиатуры, для узких экранов.

На мобильных устройствах прокручивайте таблицу внутри её области

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

Состояние сортировки и сравнение чисел в дизайн-системе Det Fælles Designsystem

Сохраняйте только один активный порядок сортировки

Сначала столбец заголовков сортируется по возрастанию. Повторное нажатие на тот же заголовок меняет направление сортировки; выбор столбца с количеством минут запускает сортировку по возрастанию. Атрибут aria-sort получает только активный заголовок, а скрытая подсказка каждой кнопки описывает следующее действие. Видимая стрелка отражает то же состояние и не является отдельным декоративным элементом.

Сравнивайте числа как числа

Поиск после отправки и восстановление при отсутствии результатов в дизайн-системе Det Fælles Designsystem

Применяйте запрос после его отправки

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

Сбрасывайте запрос, не меняя порядок сортировки

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

Полноценная рабочая интеграция дизайн-системы Det Fælles Designsystem

Загружайте ресурсы дистрибутива, сохраняя пути

В карте экспортов пакета 11.3.0 доступна точка входа JavaScript, но не произвольные глубокие импорты CSS. При настройке дистрибутив копируется в public/dkfds, а таблица стилей подключается из index.html с сохранением относительных путей к шрифтам и изображениям. Сохраните предоставленные main.js и denmark.css рядом с этой оболочкой. В локальном предварительном просмотре используются те же ресурсы, чтобы их можно было надёжно проверить.

1. Установите dkfds 11.3.0 и скопируйте его дистрибутив в public/dkfds.
2. Используйте предоставленную оболочку HTML, чтобы загрузить таблицу стилей Borger.dk.
3. Сохраните полный файл входа и CSS, затем запустите локальное приложение.
4. Проверьте сортировку чисел, поиск после отправки, сброс и внутреннюю прокрутку на мобильном устройстве.

Проверьте весь сценарий сравнения

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

Примеры компонентов дизайн-системы Det Fælles Designsystem

// index.html loads /dkfds/css/dkfds-borgerdk.css from the copied distribution.
import './denmark.css';
const rows=[{name:'Content inventory',type:'Worksheet',minutes:25,note:'Map the purpose and owner of each section.'},{name:'Accessibility review',type:'Checklist',minutes:30,note:'Inspect keyboard use, reading order and clear labels.'},{name:'Research questions',type:'Template',minutes:15,note:'Separate assumptions from questions that need evidence.'},{name:'Decision summary',type:'Template',minutes:10,note:'Record a choice, its reason and what remains uncertain.'},{name:'Prototype walkthrough',type:'Guide',minutes:20,note:'Walk through one realistic task and note friction.'}];let key='name',direction=1,query='';document.getElementById('root').innerHTML=`<main><p class="eyebrow">DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY</p><h1>Find a planning resource</h1><p class="lead">Compare five authored resources. Search the full table or sort by title and estimated reading time.</p><form id="search-form"><label class="form-label" for="search">Search sample resources</label><div class="search-controls"><input class="form-input" id="search" type="search"><button class="button button-primary" type="submit">Search</button><button class="button button-secondary" id="reset" type="button">Reset</button></div></form><p id="count" role="status"></p><div class="table--responsive-scroll" tabindex="0" role="region" aria-label="Resource comparison table"><table class="table" id="resource-table"><caption>Original resource comparison; reading times are sample estimates</caption><thead><tr><th scope="col" id="name-head" aria-sort="ascending"><button class="button button-unstyled sort" data-key="name">Resource title <span class="arrow" aria-hidden="true">↑</span><span class="sr-only"> — sort descending</span></button></th><th scope="col">Format</th><th scope="col" id="minutes-head"><button class="button button-unstyled sort" data-key="minutes">Minutes <span class="arrow" aria-hidden="true">↕</span><span class="sr-only"> — sort ascending</span></button></th><th scope="col">Purpose</th></tr></thead><tbody id="rows"></tbody></table></div><section id="empty" hidden><h2>No matching resource</h2><p>Try a shorter word, a format such as Template, or reset the search.</p></section><aside><h2>About this table</h2><p>The Borger.dk theme and table styling are from DKFDS 11.3.0. Search and sorting are complete original JavaScript: the published table component does not implement them for you.</p><ul><li>Search is applied when you submit the form.</li><li>A selected column always has an active sort order.</li><li>On a narrow screen, scroll the table without moving the whole page.</li></ul></aside></main>`;const $=id=>document.getElementById(id);function render(){const list=rows.filter(r=>Object.values(r).join(' ').toLowerCase().includes(query)).sort((a,b)=>direction*(key==='minutes'?a.minutes-b.minutes:a.name.localeCompare(b.name)));$('rows').replaceChildren(...list.map(r=>{const tr=document.createElement('tr');[r.name,r.type,String(r.minutes),r.note].forEach(value=>{const td=document.createElement('td');td.textContent=value;tr.append(td)});return tr}));$('count').textContent=list.length+' of '+rows.length+' resources · sorted by '+(key==='name'?'title':'minutes')+' '+(direction===1?'ascending':'descending');$('empty').hidden=!!list.length;document.querySelectorAll('.sort').forEach(b=>{const active=b.dataset.key===key;active?b.parentElement.setAttribute('aria-sort',direction===1?'ascending':'descending'):b.parentElement.removeAttribute('aria-sort');b.querySelector('.arrow').textContent=active?(direction===1?'↑':'↓'):'↕';b.querySelector('.sr-only').textContent=' — sort '+(active&&direction===1?'descending':'ascending')})}$('search-form').addEventListener('submit',e=>{e.preventDefault();query=$('search').value.trim().toLowerCase();render()});$('reset').addEventListener('click',()=>{$('search').value='';query='';render();$('search').focus()});document.querySelectorAll('.sort').forEach(b=>b.addEventListener('click',()=>{direction=key===b.dataset.key?-direction:1;key=b.dataset.key;render()}));render();

body{margin:0}main{max-width:1160px;padding:32px;margin:auto}.eyebrow{font-size:14px;font-weight:600;letter-spacing:.04em}.lead{max-width:66ch}#search-form{margin:32px 0}.search-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.search-controls input{flex:1;min-width:180px;max-width:480px}#count{font-weight:600}.table--responsive-scroll{position:relative;max-width:100%;overflow:auto}.table{min-width:720px;width:100%}.table caption{text-align:left;font-weight:600;margin-bottom:16px}.table th:nth-child(1){width:25%}.table th:nth-child(2){width:15%}.table th:nth-child(3){width:16%}.arrow{margin-left:8px}.sort{white-space:nowrap}aside,#empty{padding:24px;margin-top:32px;background:#f1f1f1;border-left:4px solid #44831e}aside h2,#empty h2{margin-top:0}aside li{margin:8px 0}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.search-controls{gap:12px}.search-controls input{flex-basis:100%;max-width:none}h1{font-size:34px}}

@media(max-width:480px){.search-controls input{min-width:0;width:100%}.search-controls .button{max-width:100%;white-space:normal}h1{overflow-wrap:anywhere}}

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Planning resource comparison</title>
<link rel="stylesheet" href="/dkfds/css/dkfds-borgerdk.css">
</head>
<body><div id="root"></div><script type="module" src="/src/main.js"></script></body>
</html>