Hoppa till huvudinnehåll

Dropdown

Meny, menylist, kontextmeny
Storybook
React Aria

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 } from '@midas-ds/components'

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​

NamnTypStandardBeskrivning
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.