# Дизайн-система Det Fælles Designsystem ## Предварительный просмотр интерфейса дизайн-системы Det Fælles Designsystem Сравните пять исходных ресурсов планирования, измените порядок сортировки и восстановите список после запроса без результатов. ## Справочник по дизайн-системе Det Fælles Designsystem Фактическая тема DKFDS 11.3.0 Borger.dk, карта интервалов, карта типографики и переменные фокуса. Указаны имена из исходного кода Sass. ### Тема и фокус Borger.dk | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | $borger-primary | #44831E | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $borger-primary-dark | #3C5C22 | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $borger-primary-darker | #233614 | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $header-portal-background-color | #f1f1f1 | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $theme-focus-width | 3px | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $theme-focus-offset | 1px | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $theme-focus-style | solid | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $typography-text-max-width | 66ch | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | | $typography-font-family | IBM Plex Sans, system-ui, system, sans-serif | Фактическая конфигурация Sass 11.3.0; эти имена — исходные переменные, а не пользовательские свойства CSS. | ### Ключи карты интервалов | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | 0 | 0px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 1 | 2px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 2 | 4px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 3 | 8px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 305 | 12px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 4 | 16px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 405 | 20px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 5 | 24px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 505 | 28px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 6 | 32px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 7 | 40px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | | 8 | 48px | Опубликованная карта $spacers. Несеквенциальные ключи, например 305 и 405, соответствуют 12px и 20px; не воспринимайте ключ как размер в пикселях. | ### Карта размеров шрифта | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | 2xs | 1.2rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | xs | 1.4rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | sm | 1.6rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | md | 1.8rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | lg | 2.0rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | xl | 2.1rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | 2xl | 2.2rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | 3xl | 2.4rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | 4xl | 2.8rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | 5xl | 3.2rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | 6xl | 4.0rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | | 7xl | 4.8rem | Опубликованная запись $fds-font-sizes. Корневой размер по умолчанию — 62.5%, с учётом пользовательских настроек шрифта браузера; при стандартном размере шрифта браузера 16px значение 1.6rem равно 16px. | ## Полное руководство по дизайн-системе 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 получает только активный заголовок, а скрытая подсказка каждой кнопки описывает следующее действие. Видимая стрелка отражает то же состояние и не является отдельным декоративным элементом. ### Сравнивайте числа как числа Данные о минутах имеют числовой тип и сортируются вычитанием. Для заголовков используется localeCompare. Алфавитная сортировка числовых строк приводит к вводящему в заблуждение порядку по мере роста значений. Исходные объекты строк остаются источником данных, а для отображения используется textContent, который не интерпретирует содержимое строк как разметку. ## Поиск после отправки и восстановление при отсутствии результатов в дизайн-системе 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 ### main.js — полная логика сравнения Полный исходный набор данных, сортировка чисел и текста, фильтрация после отправки и сброс. ``` // 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=`

DET FÆLLES DESIGNSYSTEM / ORIGINAL TABLE STUDY

Find a planning resource

Compare five authored resources. Search the full table or sort by title and estimated reading time.

Original resource comparison; reading times are sample estimates
FormatPurpose
`;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(); ``` Справочник по коду - Сортировка и поиск реализованы в исходном коде приложения, согласно границам интеграции, заданным в опубликованных рекомендациях по таблицам. ### denmark.css — исходная композиция страницы Адаптивные элементы управления поиском и область прокрутки таблицы, доступная с клавиатуры. ``` 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}} ``` Справочник по коду - На узких экранах таблица сохраняет расположение столбцов внутри области прокрутки. ### index.html — оболочка для полного дистрибутива ресурсов Загрузите опубликованную таблицу стилей, сохранив относительные пути к ресурсам. ``` Planning resource comparison
``` Справочник по коду - Замените корневой файл index.html в Vite этой оболочкой. ## Настройка агента для дизайн-системы Det Fælles Designsystem ### Отправная точка для реализации Официальная таблица стилей и шрифты работают локально. Сортировка и фильтрация реализованы на стороне приложения; для статической стилизации этой таблицы вызов DKFDS.init не требуется. ``` npm create vite@latest dkfds-table -- --template vanilla cd dkfds-table npm install npm install dkfds@11.3.0 mkdir -p public/dkfds cp -R node_modules/dkfds/dist/. public/dkfds/ # Replace index.html, src/main.js and src/denmark.css with the supplied examples. npm run dev ``` ### Запрос для вашего проекта ``` Создайте сравнение ресурсов DKFDS, используя фактический дистрибутив Borger.dk 11.3.0 и соответствующие шрифты. Реализуйте полноценную исходную сортировку чисел и заголовков, единственный активный заголовок aria-sort, поиск после отправки, отображение количества результатов и сброс с сохранением порядка сортировки. Разместите таблицу в собственной горизонтально прокручиваемой области, доступной с клавиатуры. ``` ## Источники и область применения дизайн-системы Det Fælles Designsystem Исходное сравнение OpenDesign с оформлением и шрифтами DKFDS 11.3.0 Borger.dk. Сортировка, поиск и примеры данных полностью реализованы в исходном коде приложения и не относятся к встроенным возможностям таблиц DKFDS. - Рекомендации по таблицам Роли разметки, прокрутки, сортировки и поиска. - Пакет и темы Таблицы стилей дистрибутива и границы инициализации. - Настройка темы Конфигурация темы на уровне исходного кода. - Версионированный исходный код Карты Sass, значения темы и лицензии на ресурсы. ## Связанные ресурсы дизайн-системы Det Fælles Designsystem ### дизайн-система .italia Реализуйте понятную последовательность обслуживания с реальной типографикой Bootstrap Italia, адаптивной структурой Stepper и возможностью восстановить локальное состояние формы. ### Designsystemet Изучите реальные роли темы, режимы размеров и поведение встроенных полей Designsystemet на примере полноценного редактора задания с индикацией количества символов и сохранением состояния отображения. ### DSFR Изучите характерные для дизайн-системы французского государства типографику, сетку и аккордеон API в рамках её институционального назначения. Сравните поведение связанных и независимых раскрывающихся элементов на нейтральном учебном примере. - [Справочник по реализации](https://designsystem.dk/komponenter/tables/) - [Источник](https://github.com/detfaellesdesignsystem/dkfds-components) - [Справочник по коду](https://designsystem.dk/komponenter/tables/) - [Справочник по коду](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Рекомендации по таблицам Роли разметки, прокрутки, сортировки и поиска.](https://designsystem.dk/komponenter/tables/) - [Пакет и темы Таблицы стилей дистрибутива и границы инициализации.](https://designsystem.dk/kom-i-gang/implementering-kode/hent-kodepakken/) - [Настройка темы Конфигурация темы на уровне исходного кода.](https://designsystem.dk/kom-i-gang/implementering-kode/justering/) - [Версионированный исходный код Карты Sass, значения темы и лицензии на ресурсы.](https://github.com/detfaellesdesignsystem/dkfds-components)