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

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @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

Dropdown

Name	Type	Default	Description
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.
escapeKeyBehavior	"none" | "clearSelection"	'clearSelection'	Whether pressing the escape key should clear selection in the menu or not. Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually.
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.

DropdownItem