Komponenter
Dropdown
Dropdown er en generisk nedtrekksliste. Den legger grunnmuren for å bygge menyer og lister.
Unable to parse html
const Preview = () => { return ( <> <Button popovertarget='dropdown'>Dropdown</Button> <Dropdown id='dropdown'> <Dropdown.List> <Dropdown.Item> <Dropdown.Button>Item 1</Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button>Item 2</Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </> ); }; render(<Preview />)
Bruk
Du kan bruke Dropdown i ren HTML ved å bruke popover-attributtet på et element med klassen ds-dropdown, og koble det til en trigger med popovertarget="ID-OF-DROPDOWN-HERE".
Designsystemet legger automatisk til popover-polyfill (npmjs.com) for å støtte det native Popover API-et (mozilla.org) i eldre nettlesere ved behov.
Du kan styre plassering med attributt på selve Dropdown:
| attribute | type | default |
|---|---|---|
| data-placement | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'none' | 'bottom' |
| data-overscroll | 'contain' | undefined | undefined |
| data-autoplacement | boolean | true |
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-dropdown-arrow-size | var(--ds-size-2) |
| --dsc-dropdown-background | var(--ds-color-neutral-surface-default) |
| --dsc-dropdown-border-color | var(--ds-color-neutral-border-subtle) |
| --dsc-dropdown-border-style | solid |
| --dsc-dropdown-border-width | var(--ds-border-width-default) |
| --dsc-dropdown-box-shadow | var(--ds-shadow-md) |
| --dsc-dropdown-item-padding | var(--ds-size-2) var(--ds-size-4) |
| --dsc-dropdown-item-size | var(--ds-size-12) |
| --dsc-dropdown-padding | var(--ds-size-3) var(--ds-size-2) |
| --dsc-dropdown-placement | bottom |
| Navn | Verdi |
|---|---|
| data-floating | top, right, bottom, left |
| data-overscroll | contain |
React
popovertarget
Når du bruker dropdown kobler du selv sammen utløseren og dropdown med id og popovertarget.
Da brukes popovertarget i små bokstaver, slik at alle versjoner av React korrekt gjengir attributtet.
Når du legger til @digdir/designsystemet-react/react-types.d.ts i ditt prosjekt, utvider vi @types/react-dom til å akseptere dette.
TriggerContext
Bruk Dropdown.TriggerContext og Dropdown.Trigger sammen, så kan Dropdown kommunisere uten å måtte bruke id og popovertarget.
Unable to parse html
const TriggerContext = () => { return ( <Dropdown.TriggerContext> <Dropdown.Trigger>Trigger</Dropdown.Trigger> <Dropdown> <Dropdown.List> <Dropdown.Item> <Dropdown.Button>Item 1</Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button>Item 2</Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </Dropdown.TriggerContext> ); }; render(<TriggerContext />)
Kontrollert
Dersom du sender inn open, så bruker du Dropdown kontrollert. Du kan bruke onClose for å få beskjed når Dropdown vil lukkes.
Merk at vi ikke bruker onClick på triggeren, dropdownen håndterer dette internt on sendet til onOpen og onClose.
Unable to parse html
const Controlled = () => { const [open, setOpen] = useState(false); return ( <Dropdown.TriggerContext> <Dropdown.Trigger> Dropdown {open ? <ChevronDownIcon aria-hidden /> : <ChevronUpIcon aria-hidden />} </Dropdown.Trigger> <Dropdown open={open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} > <Dropdown.List> <Dropdown.Item> <Dropdown.Button onClick={() => setOpen(false)}> Trykk på meg lukker </Dropdown.Button> </Dropdown.Item> <Dropdown.Item> <Dropdown.Button onClick={() => setOpen(false)}> Eg lukker også </Dropdown.Button> </Dropdown.Item> </Dropdown.List> </Dropdown> </Dropdown.TriggerContext> ); }; render(<Controlled />)
Props
Dropdown
Dropdown
- 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
| 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. |
Piltastnavigasjon
Du kan kombinere Dropdown med focusgroup for å tilby piltastnavigasjon mellom elementer.
Referanser
Vi bruker ul og li tags i dropdownen, valget er basert på disse:
- https://www.w3.org/WAI/tutorials/menus/flyout/#flyoutnavkbbtn
- https://www.w3.org/WAI/ARIA/apg/patterns/menu-button