Komponenter

Dropdown

Dropdown er en generisk nedtrekksliste. Den legger grunnmuren for å bygge menyer og lister.

Oversikt Kode Tilgjengelighet

id
Description: id to connect the trigger with the popover - required when not using Popover.Context.
Type: string

open
Description: When a boolean is provided, the popover will be controlled.
Type: boolean
Default: undefined

onOpen
Description: Callback when the popover wants to open.
Type: (() => void)

onClose
Description: Callback when the popover wants to close.
Type: (() => void)

autoPlacement
Description: Whether to enable auto placement.
Type: boolean
Default: true

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

placement
Description: The placement of the dropdown
Type: Placement
Default: bottom-end

Name	Type	Default	Description
id	`string`	-	id to connect the trigger with the popover - required when not using Popover.Context.
open	`boolean`	undefined	When a boolean is provided, the popover will be controlled.
onOpen	`(() => void)`	-	Callback when the popover wants to open.
onClose	`(() => void)`	-	Callback when the popover wants to close.
autoPlacement	`boolean`	true	Whether to enable auto placement.
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.
placement	`Placement`	bottom-end	The placement of the dropdown

DropdownButton

type
Description: Specify the type of button. Unset when `asChild` is true
Type: "submit" | "reset" | "button"
Default: 'button'

icon
Description: Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
Type: boolean
Default: false

loading
Description: Toggle loading state. Pass an element if you want to display a custom loader.
Type: ReactNode
Default: false

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

Name	Type	Default	Description
type	`"submit" \| "reset" \| "button"`	'button'	Specify the type of button. Unset when `asChild` is true
icon	`boolean`	false	Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
loading	`ReactNode`	false	Toggle loading state. Pass an element if you want to display a custom loader.
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

DropdownHeading

level
Description: Heading level. This will translate into any h1-6 level unless `asChild` is `true`
Type: 1 | 2 | 3 | 4 | 5 | 6
Default: 2

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false

Name	Type	Default	Description
level	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	2	Heading level. This will translate into any h1-6 level unless `asChild` is `true`
asChild	`boolean`	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

DropdownTrigger

inline
Description: Will render the trigger as inline text.
Type: boolean
Default: false false

asChild
Description: Change the default rendered element for the one passed as a child, merging their props and behavior.
Type: boolean
Default: false false

variant
Description: Specify which variant to use
Type: "primary" | "secondary" | "tertiary"
Default: 'primary'

icon
Description: Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
Type: boolean
Default: false

loading
Description: Toggle loading state. Pass an element if you want to display a custom loader.
Type: ReactNode
Default: false

type
Description: Specify the type of button. Unset when `asChild` is true
Type: "button" | "submit" | "reset"
Default: 'button'

Name	Type	Default	Description
inline	`boolean`	false false	Will render the trigger as inline text.
asChild	`boolean`	false false	Change the default rendered element for the one passed as a child, merging their props and behavior.
variant	`"primary" \| "secondary" \| "tertiary"`	'primary'	Specify which variant to use
icon	`boolean`	false	Toggle icon only styling, pass icon as children When combined with loading, the loading-icon will be shown instead of the icon.
loading	`ReactNode`	false	Toggle loading state. Pass an element if you want to display a custom loader.
type	`"button" \| "submit" \| "reset"`	'button'	Specify the type of button. Unset when `asChild` is true

Bruk

Dropdown bruker Popover internt.

import { Dropdown } from "@digdir/designsystemet-react";
<>  {/* med context */}  <Dropdown.TriggerContext>    <Dropdown.Trigger>Trigger</Dropdown.Trigger>    <Dropdown>      <Dropdown.Heading>Heading</Dropdown.Heading>      <Dropdown.List>        <Dropdown.Item>          <Dropdown.Button>Item</Dropdown.Button>        </Dropdown.Item>      </Dropdown.List>    </Dropdown>  </Dropdown.TriggerContext>
  {/* uten context */}  <Button popovertarget="my-dropdown">Trigger</Button>  <Dropdown id="my-dropdown">    <Dropdown.Heading>Heading</Dropdown.Heading>    <Dropdown.List>      <Dropdown.Item>        <Dropdown.Button>Item</Dropdown.Button>      </Dropdown.Item>    </Dropdown.List>  </Dropdown></>;

React og `popovertarget`

Når du bruker popover uten Dropdown.TriggerContext, kobler du selv sammen utløseren og popover. Da brukes popovertarget i små bokstaver, slik at alle versjoner av React korrekt gjengir attributtet. Når du bruker @digdir/designsystemet-react utvider vi @types/react-dom til å akseptere dette.

Polyfill

Dropdown bruker Popover API (mozilla.org). Dette apiet er klassifisert som Baseline: Newly available (mozilla.org) fra april 2024, med Firefox som siste nettleser la det til. I noen tilfeller kan en oppleve at brukere av ulike grunner er låst til eldre nettleserversjoner, og da kan det være aktuelt å legge til en Popover-Polyfill (github.com) for å sikre at Dropdown fungerer for alle.

Eksempel

Kontrollert

Dersom du sender inn open, så bruker du Dropdown kontrollert. Du kan bruke onClose for å få beskjed når Dropdown vil lukkes.

Uten `TriggerContext`

Dropdown bruker popover APIet, så du kan bruke Dropdown uten Dropdown.Trigger. Du må da legge til popovertarget={id} på Dropdown, og id på Dropdown.

HTML

Du kan bruke native popover-api direkte i HTML. Dette kan brukes uten JavaScript, dersom du ikke vil polyfille.

Merk deg at elementet med popover="manual" bruker to klasser, ds-popover og ds-dropdown. Du velger selv om du vil bruke popover="manual" eller bare popover for å åpne dropdownen.

Popover API (mozilla.org)

<button  class="ds-button"  data-variant="primary"  type="button"  popovertarget="dropdown">  Dropdown</button><div  class="ds-popover ds-dropdown"  id="dropdown"  popover="manual"  data-variant="default">  <ul>    <li>      <button class="ds-button" data-variant="tertiary" type="button">        Item      </button>    </li>  </ul></div>

CSS variabler og data-attributter

CSS-variabler
Navn	Verdi
--dsc-dropdown-padding	var(--ds-size-3) var(--ds-size-2)
--dsc-dropdown-item-padding	var(--ds-size-2) var(--ds-size-4)
--dsc-dropdown-item-size	var(--ds-size-12)
--dsc-dropdown-background	var(--ds-color-neutral-surface-default)
--dsc-dropdown-border-width	var(--ds-border-width-default)
--dsc-dropdown-border-style	solid
--dsc-dropdown-border-color	var(--ds-color-neutral-border-subtle)
--dsc-popover-arrow-size	var(--ds-size-2)

Ingen relevante data-attributter funnet.

Referanser

Vi bruker ul og li tags i dropdownen, valget er basert på disse:

Rediger denne siden på github.com (åpnes i ny fane)