3.1.0
Show and hide details by expanding and collapsing content vertically.
Namn | Typ | Beskrivning |
---|---|---|
capitalizeFirstLetter | boolean | Determines whether the first letter should be capitalized. |
className | string | Optional CSS class name. |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disableRipple | boolean | If true, the ripple effect is disabled. ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the .Mui-focusVisible class. |
expanded | boolean | The current state of the accordion (expanded or collapsed). Managed in parent element (Accordion). |
expandIconPosition | "start" |
"end" | Override default position (right) of expand icon. |
headingComponent | "h2" |
"h3" |
"h4" |
"h5" |
"h6" | Component for a visually hidden heading before the AccordionSummary button. Defaults to "h2". Set to appropriate level depending on page context. |
iconLeft | FC | Optional icon shown to the left of the primary text. If both iconLeft and imageLeft are provided, iconLeft takes precedence. |
id | string | A unique ID. Used for setting WAI-ARIA properties. |
imageLeft | ReactElement | Custom image displayed to the left of the primary text. If both iconLeft and imageLeft are provided, iconLeft takes precedence. |
onClick | () => void | Click event of the AccordionSummary button. |
primaryMeta | ReactNode | Optional text that provides additional information, displayed to the right of the primary text. |
primaryText * | ReactNode | Main text to be displayed in the accordion summary. |
secondaryMeta | ReactNode | Optional secondary text that provides further details, displayed to the right of the primary text but below primaryMeta. |
setExpanded | (expanded: boolean) => void | Function for changing the state of the accordion. Managed in parent element (Accordion). |
sx | SxProps |
npm install @sj-ab/component-library.ui.accordion
AccordionSummary
presenteras för användaren som en knapp inuti en rubrik:
<h2>
<button type="button" aria-expanded="false">
Varför är tillgänglighet viktigt?
</button>
</h2>
Rubriken gör det möjligt för användare med skärmläsare att hoppa mellan alla accordions och andra rubriker på sidan med tangentbordskommandot "H"
.
Varje utvecklare ansvarar för att Accordion får rätt rubriknivå för att passa i den kontext där den ska visas. Rubriknivåer får aldrig skippas på en sida utan måste följa sin semantiska ordning. Som standard används en h2-rubrik men det kan ändras vid behov med propen headingLevel.
ARIA-attributet aria-expanded
berättar för användare med skärmläsare om komponenten är utfälld eller inte. Det hanteras automatiskt på komponentnivå i AccordionSummary
och behöver inte sättas manuellt.
Namnet på AccordionSummary
som läses upp av skärmläsare kommer automatiskt från dess innehåll (primaryText, secondaryText, primaryMeta och secondaryMeta).
Importer av Accordion
Repos med Accordion
Senaste installerade version av Accordion
Äldsta installerade version av Accordion