components library
All Designsystemet Flutter component widgets.
Classes
- DsAlert
- Severity-based notification banner for inline messages.
- DsAvatar
- An avatar that displays initials derived from name, or an image loaded from imageUrl with an initials fallback.
- DsAvatarStack
- Displays a horizontal stack of overlapping avatar widgets.
- DsBadge
- A numeric badge overlay positioned on a corner of its child widget.
- DsBreadcrumbs
- En brødsmulesti (navigasjon) med lenker adskilt av et chevron-ikon.
- DsButton
- A Designsystemet button with primary, secondary, and tertiary variants.
- DsCard
- A container card with a border or elevation shadow.
- DsCardBlock
- A content block section for a DsCard with horizontal and vertical padding.
- Footer section for a DsCard, providing bottom-aligned padding.
- DsCardHeader
- Header section for a DsCard, providing top-aligned padding.
- DsCheckbox
- A Designsystemet checkbox with optional label, description, and error state.
- DsChip
- A pill-shaped chip with optional selection state and remove button.
- DsColor
-
Fargerolle for en komponent — velger hvilken fargeskala (
DsColorScale) komponenten løses mot via DsColorScheme. - DsColorAccent
- Aksentfargen — se DsColor.accent.
- DsColorBrand1
- Første merkevarefarge — se DsColor.brand1.
- DsColorBrand2
- Andre merkevarefarge — se DsColor.brand2.
- DsColorBrand3
- Tredje merkevarefarge — se DsColor.brand3.
- DsColorCustom
- En egendefinert fargerolle identifisert med en key, for skalaer som ikke er en av de ni innebygde rollene. Opprettes via DsColor.custom.
- DsColorDanger
- Farefarge — se DsColor.danger.
- DsColorInfo
- Informasjonsfarge — se DsColor.info.
- DsColorNeutral
- Nøytral farge — se DsColor.neutral.
- DsColorSuccess
- Suksessfarge — se DsColor.success.
- DsColorWarning
- Advarselsfarge — se DsColor.warning.
- DsControlLabel
- The shared label layout for selection controls (checkbox, radio, switch).
- DsDetails
- An expandable disclosure widget that toggles between a summary and its child content with a size transition animation.
- DsDialog
- Modalt dialogvindu med tittel, valgfri lukkeknapp og fokusfelle.
- DsDivider
- A horizontal or vertical divider line using the theme's border color.
- DsDropdown
- An overlay-based dropdown menu that appears below a trigger widget.
-
DsDropdownItem<
T> - A data model for a single item within a DsDropdown menu.
- DsErrorSummary
- A summary panel listing validation errors styled with danger colors.
- DsField
- Form field wrapper that composes a label, description, input, and validation message.
- DsFieldScope
- Eksponerer den omsluttende DsField-tilstanden (label, description og error) for inndata-widgets lenger ned i treet.
- DsFieldset
- Grupperer relaterte skjemaelementer under en synlig legend-overskrift.
- DsIcons
- Curated icon set for the Designsystemet component library.
- DsInput
- Core text input component styled with Designsystemet tokens.
- DsLink
- En tekstlenke med Designsystemet-styling.
- DsList
- An ordered or unordered list of items with bullet or number markers.
- DsPagination
- En pagineringskontroll (sidenavigasjon) med nummererte sideknapper og forrige/neste-piler.
- DsPopover
- An overlay popover anchored to a trigger widget.
- DsRadio
- A radio button with optional label, description, and error state.
- DsSearch
- Søkefelt med forstørrelsesglass-ikon som prefiks.
-
DsSelect<
T> -
A select control that opens an overlay dropdown to choose a single value of
type
Tfrom a list of options and optionally grouped groups. -
DsSelectOptgroup<
T> - A labelled group of DsSelectOptions within a DsSelect.
-
DsSelectOption<
T> - A single selectable option within a DsSelect.
- DsSkeleton
- En plassholder-lasteindikator med en pulserende skimmer-animasjon.
- DsSkipLink
- En hopp-til-innhold-lenke for tilgjengelighet som kun er synlig ved fokus.
- DsSpinner
- An animated circular loading spinner.
-
DsSuggestion<
T> - A combobox: a text field with a filterable overlay list of options.
-
DsSuggestionOption<
T> - A single selectable option in a DsSuggestion.
- DsSwitch
- A toggle switch with an animated sliding thumb.
- DsTable
- A data table with a styled header, body rows, optional footer and caption.
- DsTabs
- Fanenavigasjon med tastaturstøtte og innholdspaneler.
- DsTag
- A small label tag with a tinted background and subtle border.
- DsTextarea
- Et flerlinjes tekstområde bygd på DsInput.
- DsTextfield
- Single-line text input styled with Designsystemet tokens.
- DsToggleGroup
- A segmented toggle control where one item is selected at a time.
- DsTooltip
- En verktøytips som vises ved siden av child ved peker-hover eller tastaturfokus.
- LucideIcons
- Lucide Icons
Enums
- DsAvatarVariant
-
Form på en avatar (
DsAvatar). Speiler Designsystemets Avatar-data-variant('circle' | 'square'). - DsBadgePlacement
-
Hvilket hjørne et merke (
DsBadge) plasseres i over verts-widgeten. - DsBadgeVariant
-
Visuell variant for
DsBadge. - DsBodySize
-
Størrelse for brødtekst (
DsParagraph/DsBody). - DsBodyVariant
- Linjeavstandsvariant for brødtekst.
- DsButtonVariant
-
Visuell variant for
DsButton. Speiler Designsystemets knappe-variant. - DsCardVariant
-
Visuell variant for
DsCard. Speiler Designsystemets Card-data-variant('default' | 'tinted'). - DsDetailsVariant
-
Visuell variant for
DsDetails. Speiler Designsystemets Details-data-variant('default' | 'tinted'). - DsDialogPlacement
- Plassering av en DsDialog.
- DsFontWeight
- Skriftvekt for tekstkomponenter, avgrenset til vektene som finnes i Designsystemet (og som leveres som Inter-fontfiler: 400/500/600).
- DsHeadingLevel
-
Overskriftsnivå for
DsHeading, fra størst (xxl) til minst (xxs). - DsIconPosition
- Hvor et ikon plasseres i forhold til knappeteksten.
- DsPlacement
- Plassering av et overlegg (Popover/Tooltip/Dialog) i forhold til ankeret.
- DsPopoverVariant
-
Visuell variant for
DsPopover. Speiler Designsystemets Popover-data-variant('default' | 'tinted'). - DsSelectionVariant
-
Delt valg-variant for
DsTag/DsSwitch/DsCheckbox/DsRadio. Speiler Designsystemetsdata-variant, deroutlinegir en utlinjet visning og standard (udefinert i React) gir den fylte visningen. - DsSeverity
-
Alvorlighetsgrad for tilbakemeldingskomponenter (f.eks.
DsAlert). - DsSize
- Størrelsesskala for komponenter (knapp, input, avkrysningsboks osv.).
- DsSkeletonVariant
-
Form på et lasteskjelett (
DsSkeleton). - DsSortDirection
-
Sorteringstilstand for en sorterbar tabellkolonne, speiler React-attributtet
aria-sort. - DsToggleGroupVariant
-
Visuell variant for
DsToggleGroup. Speiler Designsystemets ToggleGroup-variant('primary' | 'secondary').
Extensions
- DsFontWeightValue on DsFontWeight
- Konverterer en DsFontWeight til Flutters FontWeight.
- DsSizePick on DsSize
- Selects one of three size-keyed values based on this DsSize.
Constants
- kDsDropdownMaxMenuHeight → const double
- Standard maksimal høyde for nedtrekksmenyen før innholdet ruller. Brukes som øvre grense når den tilgjengelige plassen mot skjermkanten klemmes inn, og som fallback når trigger/visningsområde ikke kan måles.
- kDsDropdownMinMenuWidth → const double
- Minste bredde på nedtrekksmenyen, slik at korte etiketter ikke gir en uforholdsmessig smal meny.
- kDsSelectMaxDropdownHeight → const double
- The maximum height the DsSelect dropdown may occupy.