@alcatraz-components/accordion
v1.0.3
Published
An accordion web component
Downloads
8
Readme
@alcatraz-components/accordion
A keyboard-accessible accordion component.
Usage
In HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use a JS module to add the component to your page -->
<script type="module" src="index.js"></script>
<!-- Use CSS custom properties to alter styles within the component. -->
<style>
:root {
--alcatraz-accordion-border: 2px solid #ddd;
--alcatraz-accordion-border-radius: 4px;
}
</style>
</head>
<body>
<alcatraz-accordion>
<alcatraz-accordion-panel label="K2" expanded="true">
<p>Age: 13</p>
<p>Color: gray</p>
</alcatraz-accordion-panel>
<alcatraz-accordion-panel label="Whitney">
<p>Age: 13</p>
<p>Color: orange</p>
</alcatraz-accordion-panel>
<alcatraz-accordion-panel label="Minnie Mitzie">
<p>Age: 4</p>
<p>Color: gray</p>
</alcatraz-accordion-panel>
<alcatraz-accordion-panel label="Paul">
<p>Age: 3</p>
<p>Color: orange</p>
</alcatraz-accordion-panel>
</alcatraz-accordion>
</body>
</html>In a JavaScript application:
npm install @alcatraz-components/accordionimport '@alcatraz-components/accordion';If you are using webpack, you can instead include the component in your entry array:
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.
<!-- Default: allows one panel to be open -->
<alcatraz-accordion></alcatraz-accordion>
<!-- Allows multiple panels to be open. -->
<alcatraz-accordion multiPanel="true"></alcatraz-accordion>The alcatraz-accordion-panel has two configurable properties:
label: This is the text that displays as the panel title.expanded: This is an optional property that expands a panel upon load.
<!-- This panel will be open upon load. -->
<alcatraz-accordion-panel label="K2" expanded="true">
<p>Age: 13</p>
<p>Color: gray</p>
</alcatraz-accordion-panel>Configurable styles
Use the CSS custom properties outlined below to customize the look of the accordion from your stylesheet.
: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;
}