Indholdsfortegnelse

Theme toggle

Der er en theme-toggle komponent, som brugeren kan bruge til at skifte mellem dark og light mode.

import { ThemeToggle } from '@dataforsyningen/designsystem/assets/designsystem.js' customElements.define('ds-theme-toggle', ThemeToggle)

Tabs

Tab-komponenten laver automatisk en række indholdselementer om til tabbed elementer, når du omslutter dem med <ds-tabs></ds-tabs>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
import { Tabs } from '@dataforsyningen/designsystem/assets/designsystem.js' customElements.define('ds-tabs', Tabs)

Produktkort/cards

Produktkort og cards laves nemt ved at sætte class ds-card på et element. Det første <img> element i et ds-card bliver altid vist som hovedbilledet.

Produktkort titel

Dette er et produktkort/card.

Produktkort titel

Dette er et produktkort/card.

Dialogboks

Dialogboks overskrift

Denne dialogbox indeholder en besked til dig.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
// Register the dialog element const dialog_element = document.querySelector('#example-dialog') // Toggles the dialog function toggleDialog() { if (dialog_element.open) { dialog_element.close() } else { dialog_element.showModal() } } // Add event listeners document.querySelectorAll('[aria-controls="example-dialog"]').forEach(function(element) { element.addEventListener('click', toggleDialog) })

Responsiv navigation

Se demoside

Eksempel på `ds-nav-responsive`, der ændrer layout i forhold til pladsen. Prøv at ændre browservinduets størrelse for at se navigationen ændre sig.

import { DSNavResponsive } from '@dataforsyningen/designsystem' customElements.define('ds-nav-responsive', DSNavResponsive)

Med `ds-nav-scrollable` kan man lave tilføje diskret scroll-funktionalitet til nav-elementer, der er lidt for lange til at vise alle links.

import { DSNavScrollable } from '@dataforsyningen/designsystem' customElements.define('ds-nav-scrollable', DSNavScrollable)
Hjælp Mere hjælp
Hjælp Mere hjælp
import { DSNav } from '@dataforsyningen/designsystem' customElements.define('ds-nav', DSNav)

Skjult panel

The thing

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Her er det hemmelige indhold

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
import { DSTogglePanel } from '@dataforsyningen/designsystem/assets/designsystem.js' customElements.define('ds-toggle-panel', DSTogglePanel)

Loading spinner

import { Spinner } from '@dataforsyningen/designsystem/assets/designsystem.js' customElements.define('ds-spinner', Spinner)

Popover

Popover content

Toast

Data table

Data table er en avanceret tabel, hvor indhold kan filtreres og sorteres.

Se demo

Events: Når en data table er renderet på skærmen, dispatcher den en datatable:update event.