Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Eksempler på implementering

Nedenstående eksempler på implementering er indsendt af løsninger, som har implementeret FDS i deres framework. Vi gør opmærksom på, at FDS-teamet kan ikke tilbyde support af nedenstående frameworks.

Mangler der et framework?

FDS er bygget efter et vanilla-princip, som betyder at koden i FDS er så simpel og standard som overhovedet muligt. Det betyder yderligere at FDS ikke stiller krav til løsningers framework og giver derved kodefrihed. Mangler der et eksempel på implementering af dit framework betyder det derfor blot, at vi ikke har modtaget et eksempel på implementering af FDS i lige det framework. Vi efterspørger hele tiden eksempler på implementering så vi kan få udvidet listen over eksempler og derved hjælpe nye løsninger hurtigere igang.

Nye eksempler på implementering af FDS i andre frameworks kan sendes til FDS-teamet ved at oprette et issue på Github eller via mail til FDS@erst.dk

Har du ændringer?

Har du tilføjelser eller ændringer til eksisterende eksempler på implementering er du mere end velkommen til at kontakte os ved at oprette et issue på Github eller sende en mail til FDS@erst.dk

Angular

For at bruge DKFDS med Angular CLI gøres følgende:

I package.json tilføjes DKFDS.

"dependencies": {
    "dkfds": "^5.0.0"

Implementer CSS

I angular.json udpeges styling alt efter, hvilket tema der skal benyttes.

"styles": [
    "node_modules/dkfds/dist/css/dkfds-­virkdk.css"

Implementer JavaScript

Javascript kan implementeres på mange måder, og meget afhænger af projektets opbygning, og hvor komponenterne er placeret.

Man kan vælge at initiere alle typer af komponenter på én gang med DKFDS.init(), eller man kan vælge at initiere en komponent enkeltvis fx new DKFDS.Accordion(document.getElementByID('ACCORDION-ID'));.

Eksempel på implementering i AppComponent:

import {Component, OnInit} from '@angular/core';
import * as DKFDS from 'dkfds'
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
    title = 'Tour of Heroes';
    
    constructor() { }
    
    ngOnInit() {
        DKFDS.init();
    }
}

Samme implementering kan bruges i underliggende components. Men bemærk at den kun vil dække komponenter, som eksisterer på det tidspunkt. Det vil sige, at hvis andre components bliver loaded efterfølgende, vil disse ikke være dækket, og man skal derfor håndtere dette efterfølgende.

I performance sammenhæng kan det også give mening, hvis man ikke gør brug af så mange javascript afhængige komponenter, at man initierer hver komponent enkeltvis fx new DKFDS.Accordion(document.getElementByID('ACCORDION-ID')); - fremfor brug af DKFS.init()