Accordion

Dragspel

Storybook

React Aria

Utfällbar komponent som används för att minska informationsmängden som presenteras för användaren. Accordion bygger på React Arias DisclosureGroup medan AccordionItem är motsvarande Disclosure.

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

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

Varianter

Accordion finns i två varianter, uncontained och contained.

Uncontained

Accordion är uncontained som standard. När accordion är uncontained har AccordionItem inte någon bakgrund.

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

Contained

Contained accordion används för att ge en mer framträdande presentation av innehållet. När accordion är contained har varje AccordionItem bakgrundsfärg och kantlinje samt möjlighet att ha en status. Kontrolleras av isContained på Accordion.

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

Status

Använd endast type tillsammans med isContained.

Contained accordion kan ha en type för att förmedla en status för innehållet. Det primära användningsområdet för detta är när Accordion används som expanderbara sektioner i en process, där varje sektion innehåller formulär eller uppgifter som behöver slutföras. AccordionItem har som standard samma bakgrund på innehållet som på titeln. Bakgrunden på innehållet kan tas bort genom att sätta hasBackground={false}.

<Accordion isContained>
  {/* 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>
  <AccordionItem
    id='watermelon'
    title='Vattenmelon'
    type='info'
  >
    Stor frukt med rött, saftigt kött
  </AccordionItem>
  <AccordionItem
    id='yellowmelon'
    title='Honungsmelon'
    type='important'
  >
    Stor frukt med rött, saftigt kött
  </AccordionItem>
</Accordion>

Size

Contained accordion finns i två storlekar, 'medium' och 'large', där 'large' är standard. Storleken anges med size på Accordion.

<Accordion
  isContained
  size='medium'
>
  {/* more items */}
  <AccordionItem
    id='mandarin'
    title='Mandarin'
  >
    Liten orange citrusfrukt
  </AccordionItem>
</Accordion>

Implementering

Multiple

En accordion har som standard bara en öppen 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}
  allowsMultipleExpanded
>
  <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>

<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
children	ReactNode	-	The children of the component. A function may be provided to alter the children based on component state.
isDisabled	boolean	-	Whether all items are disabled.
isContained	boolean	-
size	Size	large	Component size when used with isContained (large: height 48px, medium: height 40px)
className	ClassNameOrFunction<DisclosureGroupRenderProps>	'react-aria-DisclosureGroup'	The CSS className for the element. A function may be provided to compute the class based on component state.
allowsMultipleExpanded	boolean	-	Whether multiple items can be expanded at the same time.
expandedKeys	Iterable<Key>	-	The currently expanded keys in the group (controlled).
defaultExpandedKeys	Iterable<Key>	-	The initial expanded keys in the group (uncontrolled).
style	StyleOrFunction<DisclosureGroupRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", DisclosureGroupRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

AccordionItem