Accordion

Dragspel

Storybook

React Aria

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

<Accordion>
  <AccordionItem
    id={'mandarin'}
    title={'Mandarin'}
  >
    Liten orange citrusfrukt
  </AccordionItem>
  <AccordionItem
    id={'sharon'}
    title={'Sharon'}
  >
    Persikoliknande frukt med fast kött
  </AccordionItem>
  <AccordionItem
    id={'watermelon'}
    title={'Vattenmelon'}
  >
    Stor frukt med rött, saftigt kött
  </AccordionItem>
</Accordion>

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

Beskrivning

Accordion bygger på React Arias DisclosureGroup medan AccordionItem är motsvarande Disclosure. Se dokumentation för respektive komponent för fler detaljer.

Egenskaper

Accordion har flertalet varianter och egenskaper.

Contained

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

<Accordion variant={'contained'}>
  {/* more items */}
  <AccordionItem
    id={'mandarin'}
    title={'Mandarin'}
  >
    Liten orange citrusfrukt
  </AccordionItem>
</Accordion>

Status

AccordionItems kan ha en status för att förtydliga för användaren att hen antingen är klar med det steget eller påkalla uppmärksamhet till att det t.ex finns fler åtgärder att utföra.

<Accordion variant='contained'>
  {/* more items */}
  <AccordionItem
    id='mandarin'
    title='Mandarin'
    type='success'
  >
    Liten orange citrusfrukt
  </AccordionItem>
  <AccordionItem
    id='sharon'
    title='Sharon'
    type='warning'
  >
    Persikoliknande frukt med fast kött
  </AccordionItem>
</Accordion>

Multiple

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 prop allowsMultipleExpanded.

<Accordion allowsMultipleExpanded>
  <AccordionItem>...</AccordionItem>
</Accordion>

Uncontrolled expanded

En Accordion kan ha en eller flera sektioner öppna som förvalt värde. Detta görs genom att sätta defaultExpandedKeys på Accordion. Värdena i defaultExpandedKeys måste matcha id på de AccordionItem som du vill expandera.

<Accordion defaultExpandedKeys={['sharon']}>
  <AccordionItem
    id={'mandarin'}
    title={'Mandarin'}
  >
    Liten orange citrusfrukt
  </AccordionItem>
  <AccordionItem
    id={'sharon'}
    title={'Sharon'}
  >
    Persikoliknande frukt med fast kött
  </AccordionItem>
  <AccordionItem
    id={'watermelon'}
    title={'Vattenmelon'}
  >
    Stor frukt med rött, saftigt kött
  </AccordionItem>
</Accordion>

Persikoliknande frukt med fast kött

Controlled expanded

En controlled Accordion kan expanderas programmatiskt med expandedKeys och onExpandedChange. Värdena i expandedKeys måste matcha id på de AccordionItem-komponenter du vill expandera.

const [expandedKeys, setExpandedKeys] =
React.useState<Set<Key>>(new Set(['mandarin']))

<Accordion
  expandedKeys={expandedKeys}
  onExpandedChange={setExpandedKeys}
  type={'multiple'}
>
  <AccordionItem
    {...props}
    id={'mandarin'}
    title={'Mandarin'}
  >
    Liten orange citrusfrukt
  </AccordionItem>
  <AccordionItem
    id={'sharon'}
    title={'Sharon'}
  >
    Persikoliknande frukt med fast kött
  </AccordionItem>
  <AccordionItem
    id={'watermelon'}
    title={'Vattenmelon'}
  >
    Stor frukt med rött, saftigt kött
  </AccordionItem>
</Accordion>
<pre>
Följande AccordionItems är öppna: {Array.from(expandedKeys).join(', ')}
</pre>

Liten orange citrusfrukt

Följande AccordionItems är öppna: mandarin

API

Accordion

Name	Type	Default	Description
variant	"uncontained" | "contained"	uncontained	Display either the larger contained variant or a smaller uncontained variant
type	"single" | "multiple"	single	@deprecated Use 'allowsMultipleExpanded' instead
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 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 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.

AccordionItem