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
Yarn
pnpm

npm install @midas-ds/components

yarn add @midas-ds/components

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

Namn	Typ	Standard	Beskrivning
label	`string`	-
title	`string`	-
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
items	`Iterable<T>`	-	Item objects in the collection.
autoFocus	`boolean \| FocusStrategy`	-	Where the focus should be set.
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	`any[]`	-	Values that should invalidate the item cache when using dynamic collections.
className	`string`	-	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.
style	`CSSProperties`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.
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.

Namn	Typ	Standard	Beskrivning
onSelectionChange	`(keys: Selection) => void`	-	Handler that is called when the selection changes.
onAction	`(key: Key) => void`	-	Handler that is called when an item is selected.
onClose	`() => void`	-	Handler that is called when the menu should close after selecting an item.
onScroll	`(e: UIEvent<HTMLDivElement, UIEvent>) => void`	-	Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event).
onOpenChange	`(isOpen: boolean) => void`	-	Handler that is called when the overlay's open state changes.

Namn	Typ	Standard	Beskrivning
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.

DropdownItem

Namn	Typ	Standard	Beskrivning
id	`Key`	-	The unique id of the item.
value	`object`	-	The object value that this item represents. When using dynamic collections, this is set automatically.
textValue	`string`	-	A string representation of the item's contents, used for features like typeahead.
isDisabled	`boolean`	-	Whether the item is disabled.
children	`ReactNode \| ((values: MenuItemRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`	-	The children of the component. A function may be provided to alter the children based on component state.
className	`string \| ((values: MenuItemRenderProps & { 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: MenuItemRenderProps & { 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.
href	`string`	-	A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).
hrefLang	`string`	-	Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).
target	`HTMLAttributeAnchorTarget`	-	The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).
rel	`string`	-	The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).
download	`string \| boolean`	-	Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).
ping	`string`	-	A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).
referrerPolicy	`HTMLAttributeReferrerPolicy`	-	How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).
routerOptions	`never`	-	Options for the configured client side router.

Namn	Typ	Standard	Beskrivning
onAction	`() => void`	-	Handler that is called when the item is selected.
onHoverStart	`(e: HoverEvent) => void`	-	Handler that is called when a hover interaction starts.
onHoverEnd	`(e: HoverEvent) => void`	-	Handler that is called when a hover interaction ends.
onHoverChange	`(isHovering: boolean) => void`	-	Handler that is called when the hover state changes.

Installation​

Exempelkod

Riktlinjer​

API​

Dropdown​

Props

Events

Tillgänglighet

DropdownItem​

Props

Events

Tillgänglighet

Installation

Riktlinjer

API

Dropdown

DropdownItem