Hoppa till huvudinnehåll

Accordion

Dragspel
Version: 1.0.4
Versionslogg
Storybook
Referens

Dragspelskomponenten låter användare visa och dölja delar av relaterat innehåll på en sida. Den används primärt för att minska informationsmängden som direkt presenteras för användaren.

Installation och användning​

npm install @midas-ds/accordion
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@midas-ds/accordion'

Riktlinjer​

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

API​

Accordion​

NamnTypStandardBeskrivning
type *"single" | "multiple"-
value string | string[]-The controlled stateful value of the accordion item whose content is expanded. The controlled stateful value of the accordion items whose contents are expanded.
defaultValue string | string[]-The value of the item whose content is expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion. The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultValue` if you do not need to control the state of an accordion.
collapsible booleanfalseWhether an accordion item can be collapsed after it has been opened.
disabled boolean-Whether or not an accordion is disabled from user interaction. @defaultValue false
orientation React__default.AriaAttributesverticalThe layout in which the Accordion operates.
dir Direction-The language read direction.
headingTag "h2" | "h3" | "p" | "span" | "h1" | "h4" | "h5" | "h6" | "strong" | "em"pPick a heading tag to be rendered as the title in each accordion
ref LegacyRef<React.ElementRef<React__default.ForwardRefExoticComponent<any>>>-Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key Key-

AccordionContent​

AccordionTrigger​

AccordionItem​

Beroenden

  • @midas-ds/theme@^0.5.23
  • react@^18.2.0