Kom i gang

Frameworks

JavaScript

Det Fælles Designsystem anvender Vanilla JavaScript (også kendt som VanillaJS eller Plain JS) uden JavaScript-biblioteker, som fx jQuery, for at undgå afhængighed til tredjepartsleverandører og deres eventuelle tekniske gæld.

Kodefrihed under ansvar

Vi har bestræbt os på at lave et designsystem, der er let at anvende og kode med, men vi vil ikke tvinge nogen væk fra deres favorit (JavaScript) framework. Så længe det visuelle design (CSS) er som beskrevet i designsystemet, er du velkommen til at udnytte de teknologier, du finder bedst, men giv vores kode et kig, den er lige til at gå til.

Du skal altid kode selvbetjeningsløsningens brugergrænseflade i valid HTML5, som det er defineret i WHATWG. Hvis du afviger fra koden i designsystemet anbefaler vi, at du sikrer din kodes validitet, fx med W3C Markup Validation Service (HTML) eller W3C CSS Validation Service (CSS).

Eksempler på anvendelse

Nedenstående eksempler viser, hvordan man kan anvende koden i udvalgte frameworks.

React

Registrering

FDS custom elements kan bruges direkte i React, når Designsystemets JavaScript er indlæst. dkfds.js registrerer alle custom elements globalt, så React-udviklere behøver ikke at registrere hvert enkelt element manuelt.

<script src="dkfds.js"></script>

Derefter kan elementerne bruges direkte i JSX:

<fds-upload-file>
    <label>Simpel vedhæft fil</label>
    <input type="file" name="documentation" id="input-id" required multiple>
</fds-upload-file>

Hvis du bruger FDS via npm-pakken, skal du sikre dig, at pakkens JavaScript bliver importeret, så de custom elements er registreret, før de bruges.

Attributer, funktioner og custom events

Brug FDS custom elements direkte i React via JSX-attributter. Hvis en komponent eksponerer funktioner eller custom events, skal du tilgå elementet via en ref.

import { useEffect, useRef } from 'react';

function Example() {
  const ref = useRef(null);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const handleFilesAdded = (event) => {
      console.log(event.detail);
    };

    el.addEventListener('files-added', handleFilesAdded);

    return () => {
      el.removeEventListener('files-added', handleFilesAdded);
    };
  }, []);

  return <fds-upload-file ref={ref} />;
}

Server-side rendering

FDS custom elements kan bruges med server-renderet HTML, hvor den fulde markup gengives på serveren og hydreres på klienten. Komponenternes funktionalitet initialiseres, når Designsystemets JavaScript indlæses i browseren.

React wrappers

En wrapper giver især mening i React, når du har brug for ref, offentlige metoder eller custom event listeners. Hvis en komponent allerede fungerer enkelt og naturligt direkte i JSX, vil en wrapper ofte ikke tilføre nok værdi.

import { useEffect, useRef, useState } from 'react';

function UploadFileWrapper() {
  const ref = useRef(null);
  const [files, setFiles] = useState([]);

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const syncFiles = () => setFiles(el.getFiles() || []);

    el.addEventListener('files-added', syncFiles);
    el.addEventListener('files-removed', syncFiles);

    return () => {
      el.removeEventListener('files-added', syncFiles);
      el.removeEventListener('files-removed', syncFiles);
    };
  }, []);

  return (
    <fds-upload-file ref={ref}>
      {files.map((f) => (
        <fds-error-message key={f.id} id={`error-${f.id}`} hidden={f.file.size <= 1024 * 1024}>
          Filen "{f.file.name}" er større end 1 MB
        </fds-error-message>
      ))}
    </fds-upload-file>
  );
}

export default UploadFileWrapper;

Blazor

Opdatér den fil, hvor du definerer dit HTML-layout og anvender scripts (fx App.razor i nyrere versioner af .NET).

<head>
    ...
    <link rel="stylesheet" href="@Assets["dkfds.css"]" />
    ...
</head>

<body>
    <Routes />
    ...
    <script src="dkfds.js"></script>
</body>

Hvis du anvender Blazor-komponenter inde i custom elements, skal du selv sørge for at HTML’en ikke initialiserer for tidligt. Du kan styre dette ved at bruge ready-attributten, som er skrevet ind i alle FDS’ custom elements.

@rendermode InteractiveServer

<fds-accordion heading="Min accordion" ready="@(isReady ? "true" : "false")">
    <MyBlazorComponent />
</fds-accordion>

@code {
    private bool isReady = false;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            isReady = true;
            StateHasChanged();
        }
    }
}

Vælg et tema