Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/funkeeflow/wc-accordion
A vanilla, a11y ready web component for your basic accordion needs. Small, simple, nothing more.
https://github.com/funkeeflow/wc-accordion
a11y accordion custom-elements vanilla-js web-components
Last synced: 4 days ago
JSON representation
A vanilla, a11y ready web component for your basic accordion needs. Small, simple, nothing more.
- Host: GitHub
- URL: https://github.com/funkeeflow/wc-accordion
- Owner: funkeeflow
- License: mit
- Created: 2021-10-04T08:07:09.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2021-10-27T16:28:23.000Z (about 3 years ago)
- Last Synced: 2024-09-19T03:20:07.307Z (about 2 months ago)
- Topics: a11y, accordion, custom-elements, vanilla-js, web-components
- Language: JavaScript
- Homepage:
- Size: 197 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# wc-accordion 🏖
A vanilla, a11y ready web component for your basic accordion needs. Small, simple, nothing more.
This is mostly inspired by [this post][link-post] from Louis Hoebregts ([@Mamboleoo](https://twitter.com/mamboleoo)).
## Demo
Check out the [demo page][link-demo]. ☀️
## Usage
```bash
npm install wc-accordion
```
in your app entry point (e.g. `app.js`)
```js
import 'wc-accordion.js'
```
or import directly from **unpkg.com**
```html
```
Then just wrap your standard [\][detials] elements. Style the `` tag as you need. Take a wrapper class for your content and thats it!
```html
Some details
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Some details
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Some details
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
```
## How to use a custom component name
To use a custom name for the element, import the default class and define the element yourself like so:
```js
import { Accordion } from 'wc-accordion'
customElement.define('my-accordion', Accordion);
```
```html
...
```
## Properties
| Property | Type | Description |
|-----------------------|------------------------|--------------------------------------------------|
| **close** | `(index: any) => void` | Close a item by index |
| **closeAll** | `() => void` | Close all at once |
| **open** | `(index: any) => void` | Open a item by index |
| **openAll** | `() => void` | Open all at once |
## Attributes
| Attributes | Values | Description |
|-----------------------|------------------------|-------------------------------------------------|
| **mode** | `exclusive`, `normal` | Exclusive will limit to only one open item at a time
## CSS Custom Properties
Use the following custom properties on the your `` elements to set animation timings and easing.
| Property | Value |
|-----------------------|------------------------------|
| **--animation-duration** | Duration of the animation |
| **--animation-duration-start** | Duration of the open animation |
| **--animation-duration-end** | Duration of the closing animation |
| **--animation-easing** | Animation ease (e.g. `ease-in`) |
**@media (prefers-reduced-motion)**
The component queries the CSS Media feature [prefers-reduced-motion][prefers-reduce-motion] and if set it will skip open and close animation all together.
## Development
Install dev dependencies
```bash
yarn install
```
Link local package
```bash
yarn run link
yarn link wc-accordion
```
Run dev server
```bash
yarn dev
```
[link-demo]: https://funkeeflow.github.io/wc-accordion/
[link-license]: https://github.com/funkeeflow/wc-accordion/blob/master/LICENSE
[link-post]: https://css-tricks.com/how-to-animate-the-details-element-using-waapi/
[prefers-reduce-motion]: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
[detials]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details
## Lincense
[MIT][link-license]