Sistema de diseño Det Fælles Designsystem.

Tema y alcance de implementación de DKFDS para el sistema de diseño Det Fælles Designsystem

Elige Borger.dk o Virk de forma deliberada

Det Fælles Designsystem distribuye hojas de estilos independientes para Borger.dk y Virk. Este ejemplo fija dkfds 11.3.0 y usa la hoja de estilos de Borger.dk, que aporta sus característicos controles principales verdes y el texto en IBM Plex Sans. No se limita a cambiar el color de un botón para presentarlo como un cambio completo de tema. Cargar otro tema debe ser una decisión de implementación deliberada.

No atribuyas a la biblioteca la ordenación original

Las pautas publicadas para tablas proporcionan marcado y estilos, pero dejan explícitamente el comportamiento de ordenación y búsqueda en manos de la aplicación. La vista previa incluye una implementación original completa de ambos. Esta distinción importa: importar DKFDS JavaScript por sí solo no convierte cualquier tabla en una vista de datos con búsqueda y ordenación.

Valores Sass y ritmo de base del sistema de diseño Det Fælles Designsystem

Interpreta los mapas de origen como mapas de origen

La referencia recoge valores Sass reales en vez de inventar nombres --token. El mapa de espaciado usa una base de 8px, con claves como 305 para 12px y 405 para 20px. En lugar de interpretar esos números como píxeles literales, el desarrollador debe usar el auxiliar de la biblioteca o las convenciones de utilidades correspondientes. La tabla de parámetros muestra la correspondencia.

Respeta la convención del tamaño de fuente raíz

El tamaño raíz predeterminado es 62.5% y respeta las preferencias tipográficas del navegador. Por eso, el mapa de tamaños de fuente de origen incluye 1.6rem para el nivel estándar de texto pequeño o de cuerpo con el valor habitual predeterminado del navegador. Copiar un valor rem en un entorno con un tamaño raíz distinto puede cambiar considerablemente el resultado. El ejemplo carga la hoja de estilos real para mantener la coherencia del contexto tipográfico y de espaciado.

Estructura semántica de tablas del sistema de diseño Det Fælles Designsystem

Usa un título de tabla y define claramente las funciones de las columnas

La comparación de recursos tiene un título, encabezados de columna y celdas de datos normales. Los títulos, los formatos, los minutos numéricos y los propósitos ocupan columnas separadas porque las personas comparan esos atributos. Los tiempos de lectura son estimaciones de ejemplo redactadas por el equipo, no estadísticas medidas de tráfico ni de rendimiento. El título deja claro ese límite sin cambiar la estructura de la tabla.

• Incluye un título útil y encabezados de columna.
• Mantén los datos numéricos como números en el modelo de la aplicación.
• Etiqueta la región de desplazamiento enfocable en pantallas estrechas.

Mantén el desplazamiento móvil dentro de la tabla

La tabla ordenable está dentro de una región de desplazamiento adaptable y enfocable. Su ancho mínimo mantiene las columnas legibles y la página exterior dentro de la ventana gráfica. En este ejemplo, la tabla no se convierte en tarjetas sin relación entre sí en pantallas estrechas, ya que eso exigiría otro modelo de navegación y controles de ordenación. Los usuarios de teclado pueden enfocar la región de desplazamiento.

Det Fælles Designsystem Estado de ordenación y comparación numérica del sistema de diseño

Mantén un único orden activo

La columna de título comienza en orden ascendente. Al activar el mismo encabezado, se invierte el orden; al seleccionar la columna de minutos, esta comienza en orden ascendente. Solo el encabezado activo recibe aria-sort, y la instrucción oculta de cada botón describe la siguiente acción. La flecha visible refleja el mismo estado, no es un elemento decorativo independiente.

Compara los números como números

Det Fælles Designsystem Búsqueda enviada y recuperación cuando no hay resultados del sistema de diseño

Aplica la consulta al enviarla

Al enviar el formulario, la búsqueda filtra todas las características mostradas, también al pulsar Enter. Escribir sin enviar no sustituye la tabla que está leyendo la persona. El estado indica la cantidad de resultados visibles y el orden actual, y la consulta permanece en el campo. Este es el modelo de búsqueda con envío elegido para el ejemplo.

Restablece la consulta sin perder el orden

Si la consulta no devuelve resultados, se muestra un mensaje para recuperarse. Al restablecerla, se restauran todas las filas y el foco vuelve al campo de búsqueda, sin alterar la columna ni la dirección de ordenación seleccionadas. Así, la búsqueda y la ordenación se mantienen como variables de estado independientes. No se muestra un estado de carga artificial porque el conjunto completo de cinco filas ya está disponible localmente.

Det Fælles Designsystem Integración funcional completa del sistema de diseño

Carga los recursos de distribución sin alterar sus rutas

El mapa de exportaciones del paquete 11.3.0 expone su entrada JavaScript, no importaciones profundas arbitrarias de CSS. La configuración copia la distribución en public/dkfds y vincula la hoja de estilos desde index.html, conservando las rutas relativas de fuentes e imágenes. Guarda main.js y denmark.css, incluidos con el ejemplo, junto a esa estructura. La vista previa local incorpora los mismos recursos para facilitar una inspección fiable.

1. Instala dkfds 11.3.0 y copia su distribución en public/dkfds.
2. Usa la estructura HTML proporcionada para cargar la hoja de estilos de Borger.dk.
3. Guarda la entrada completa y CSS; después, ejecuta la aplicación local.
4. Comprueba la ordenación numérica, la búsqueda enviada, el restablecimiento y el desplazamiento interno en móviles.

Comprueba todo el flujo de comparación

Ordena los minutos en ambos sentidos, envía una consulta sin coincidencias y restablece la tabla. Busca «Template» y comprueba que solo queden las dos filas de plantillas y que se conserve el orden actual. En el ancho de un teléfono, desplázate por la tabla y confirma que la página no se desborde. La comprobación también verifica que se carguen todos los recursos incluidos y que no haya errores del navegador.

Det Fælles Designsystem Ejemplos de componentes del sistema de diseño

// 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>