An accordion web component
npm install @alcatraz-components/accordionA keyboard-accessible accordion component.
In HTML:
``html
Age: 13
Color: gray
Age: 13
Color: orange
Age: 4
Color: gray
Age: 3
Color: orange
In a JavaScript application:
`
npm install @alcatraz-components/accordion
``js
import '@alcatraz-components/accordion';
`If you are using webpack, you can instead include the component in your entry array:
`js
module.exports = {
entry: ['@alcatraz-component/accordion', './index.js']
};
`Component properties
The main component,
alcatraz-accordion, has one _optional_, configurable property: multiPanel.Setting
multiPanel="true" allows the user to open several panels at once. The default behavior closes the previous panel when the user clicks on a new panel.`html
`The
alcatraz-accordion-panel has two configurable properties:1.
label: This is the text that displays as the panel title.
1. expanded: This is an _optional_ property that expands a panel upon load.`html
Age: 13
Color: gray
`Configurable styles
Use the CSS custom properties outlined below to customize the look of the accordion from your stylesheet.
`css
:root {
/ Accordion /
--alcatraz-accordion-border: 1px solid #ddd;
--alcatraz-accordion-border-radius: 0; / Item /
--alcatraz-accordion-item-padding: 1rem;
--alcatraz-accordion-button-bg-color: #fff;
--alcatraz-accordion-button-font-size: 20px;
--alcatraz-accordion-button-text-align: left;
--alcatraz-accordion-panel-margin-top: 1rem;
}
``