@zendeskgarden/container-accordion v3.0.8
@zendeskgarden/container-accordion
This package includes containers relating to accordions in the Garden Design System.
Installation
npm install @zendeskgarden/container-accordion
Usage
This container implements the accordion design pattern and can be used to build an accordion component. Check out storybook for live examples.
useAccordion
The useAccordion
hook manages toggle state and required accessibility
attributes for a group of sections.
import { useAccordion } from '@zendeskgarden/container-accordion';
const Accordion = ({ sections = [0, 1, 2], expandable = true, collapsible = true } = {}) => {
const { getHeaderProps, getTriggerProps, getPanelProps, expandedSections, disabledSections } =
useAccordion({
sections,
expandedSections: [0],
expandable,
collapsible
});
return (
<>
{sections.map((section, index) => {
const disabled = disabledSections.indexOf(index) !== -1;
const hidden = expandedSections.indexOf(index) === -1;
return (
<div key={index}>
<h2 {...getHeaderProps({ role: null, ariaLevel: null })}>
<button
{...getTriggerProps({
index,
role: null,
tabIndex: null,
disabled,
style: { width: '100%' }
})}
>
{index}
</button>
</h2>
<section
{...getPanelProps({
index,
role: null,
hidden
})}
>
{section}
</section>
</div>
);
})}
</>
);
};
return <Accordion expandable={true} collapsible={true} />;
AccordionContainer
AccordionContainer
is a render-prop wrapper for the useAccordion
hook.
import { AccordionContainer } from '@zendeskgarden/container-accordion';
const Accordion = ({ sections = [0, 1, 2], expandable = true, collapsible = true } = {}) => (
<AccordionContainer sections={sections} expandable={expandable} collapsible={collapsible}>
{({ getHeaderProps, getTriggerProps, getPanelProps, expandedSections, disabledSections }) => (
<>
{sections.map((section, index) => {
const disabled = disabledSections.indexOf(index) !== -1;
const hidden = expandedSections.indexOf(index) === -1;
return (
<div key={index}>
<h2 {...getHeaderProps({ role: null, ariaLevel: null })}>
<button
{...getTriggerProps({
index,
role: null,
tabIndex: null,
disabled,
style: { width: '100%' }
})}
>
{index}
</button>
</h2>
<section
{...getPanelProps({
index,
role: null,
hidden
})}
>
{section}
</section>
</div>
);
})}
</>
)}
</AccordionContainer>
);
return <Accordion expandable={true} collapsible={true} />;
4 months ago
4 months ago
4 months ago
4 months ago
10 months ago
10 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
11 months ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago