Hoppa till huvudinnehåll

Accordion

Dragspel
Storybook
React Aria

Utfällbar komponent som används för att minska informationsmängden som direkt presenteras för användaren.

Installation​

npm install @midas-ds/components
import { Accordion, AccordionItem } from '@midas-ds/components'

Egenskaper​

Accordion har flertalet varianter och egenskaper.

Contained​

En tydligare variant av layouten när det finns en tydlig gräns mellan varje sektion.

Flera öppna samtidigt​

En accordion har som standard bara en öppet samtidigt och stänger automatiskt andra sektioner när en ny öppnas. Detta kan ändras genom att sätta type till multiple.

Öppen som standard​

En accordion kan ha en eller flera sektioner öppna som standard. Detta görs genom att sätta defaultExpandedKeys på Accordion. Detta är en array med nycklar för de sektioner som ska vara öppna som standard. Nycklarna bestäms med id på respektive AccordionItem.

Riktlinjer​

  • Dragspelet är komprimerat som standard och expanderas genom att klicka på rubrikytan.

API​

Accordion​

NamnTypStandardBeskrivning
variant "uncontained" | "contained"uncontainedDisplay either the larger contained variant or a smaller uncontained variant
type "single" | "multiple"singleWeither to allow the user to have multiple accordions open at the same time
allowsMultipleExpanded boolean-Whether multiple items can be expanded at the same time.
isDisabled boolean-Whether all items are disabled.
expandedKeys Iterable<Key>-The currently expanded keys in the group (controlled).
defaultExpandedKeys Iterable<Key>-The initial expanded keys in the group (uncontrolled).
children ReactNode | ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode)-The children of the component. A function may be provided to alter the children based on component state.
className string | ((values: DisclosureGroupRenderProps & { 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: DisclosureGroupRenderProps & { 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.
id string-The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).

AccordionItem​