Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stefanhuber/web-accordion
web-accordion is a lightweight, dependency-free, styleable accordion web component
https://github.com/stefanhuber/web-accordion
accordion html stencil stenciljs web-accordion web-component
Last synced: about 1 month ago
JSON representation
web-accordion is a lightweight, dependency-free, styleable accordion web component
- Host: GitHub
- URL: https://github.com/stefanhuber/web-accordion
- Owner: stefanhuber
- License: bsd-2-clause
- Created: 2019-09-27T12:11:35.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-27T11:26:18.000Z (almost 2 years ago)
- Last Synced: 2024-09-30T17:06:55.161Z (about 1 month ago)
- Topics: accordion, html, stencil, stenciljs, web-accordion, web-component
- Language: TypeScript
- Homepage: https://stefanhuber.github.io/web-accordion/
- Size: 17.6 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
 [](https://www.webcomponents.org/element/web-accordion)
> `web-accordion` is a lightweight, dependency-free, styleable accordion web component.
# Installation
## Script tag
```html
```
## Node Module
- Install via npm: `npm install web-accordion --save`
- Import `web-accordion` in your JavaScript and `defineCustomElements`:
```javascript
import { defineCustomElements } from 'web-accordion';
defineCustomElements();
```
## Framework integration
For integration with different frameworks the [stencil docs](https://stenciljs.com/docs/overview) should be consulted.
# Using this component
Add the `web-accordion` component as the accordion parent to your html. For each accordion entry add a `web-accrdion-item`. Add a `slot="title"` for the respective accordion item header:
```html
item no 1
content of item no 1
item no 2
content of item no 2
```
A full example with some styling can be found [here](https://github.com/stefanhuber/web-accordion/blob/master/docs/index.html).
# web-accordion API
## Methods
### `close(index: number) => Promise`
close an accordion item
#### Returns
Type: `Promise`
### `open(index: number) => Promise`
Open an accordion item
#### Returns
Type: `Promise`
# web-accordion-item API
## Properties
| Property | Attribute | Description | Type | Default |
| ------------------------ | --------- | -------------------------------------------------------------------------------- | ------------------------------------------- | ------------------------------------ |
| `index` | `index` | index of accordion item from top to bottom | `number` | `-1` |
| `mutationObserverConfig` | -- | The mutation observer config to listen for content changes in the accordion item | `{ childList: boolean; subtree: boolean; }` | `{ childList: true, subtree: true }` |
| `open` | `open` | accordion item is open or opening (css transition) | `boolean` | `false` |
## Events
| Event | Description | Type |
| ---------------- | -------------------------------------------------------- | ------------------ |
| `contentChanged` | triggered when the content of the accordion item changes | `CustomEvent` |
| `openEvent` | triggered when the accordion item is opened | `CustomEvent` |
## Methods
### `closeItem() => Promise`
close the accordion item
#### Returns
Type: `Promise`
### `openItem() => Promise`
open the accordion item
#### Returns
Type: `Promise`
# Developer
```
npm i install dependencies
npm start start local development
npm run build build component for production
npm test run e2e tests
```