Hoppa till huvudinnehåll

Dropdown

Meny, menylist, kontextmeny

En dropdown kan användas för att samla ihop funktioner som sällan används eller som kompletterar nuvarande funktion.

Installation

npm install @midas-ds/components
import { Dropdown, DropdownItem, Button } from '@midas-ds/components';

<Dropdown title='Meny'>
<DropdownItem>
<Button variant='tertiary'>Skriv ut</Button>
</DropdownItem>
<DropdownItem>
<Button variant='tertiary'>Avbryt</Button>
</DropdownItem>
<DropdownItem>
<Button variant='tertiary'>Dela</Button>
</DropdownItem>
</Dropdown>

Beskrivning

Dropdown bygger på React Aria Menu.

Riktlinjer

  • Använd endast till sekundära handlingar som inte är högt prioriterade.
  • Knappen ska helst ha en titel, annars bör en aria-label användas.

API

NameTypeDefaultDescription
label string-
title string-
renderEmptyState () => ReactNode-

Provides content to display when there are no items in the list.

id string-

The element's unique identifier. See MDN.

autoFocus boolean | FocusStrategy-

Where the focus should be set.

items Iterable<T>-

Item objects in the collection.

disallowEmptySelection boolean-

Whether the collection allows empty selection.

shouldFocusWrap boolean-

Whether keyboard navigation is circular.

disabledKeys Iterable<Key>-

The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.

selectionMode SelectionMode-

The type of selection that is allowed in the collection.

selectedKeys Iterable<Key> | "all"-

The currently selected keys in the collection (controlled).

defaultSelectedKeys Iterable<Key> | "all"-

The initial selected keys in the collection (uncontrolled).

children ReactNode | ((item: T) => ReactNode)-

The contents of the collection.

dependencies readonly any[]-

Values that should invalidate the item cache when using dynamic collections.

className string | ((values: MenuRenderProps & { defaultClassName: string; }) => string)-

The CSS className for the element. A function may be provided to compute the class based on component state.

style CSSProperties | ((values: MenuRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)-

The inline style for the element. A function may be provided to compute the style based on component state.

slot string-

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

isOpen boolean-

Whether the overlay is open by default (controlled).

defaultOpen boolean-

Whether the overlay is open by default (uncontrolled).

trigger MenuTriggerType'press'

How the menu is triggered.