Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metonym/svelte-accessible-accordion
Accessible accordion component
https://github.com/metonym/svelte-accessible-accordion
a11y accessible accordion svelte svelte-component svelte-components typescript-definitions wai-aria
Last synced: 10 days ago
JSON representation
Accessible accordion component
- Host: GitHub
- URL: https://github.com/metonym/svelte-accessible-accordion
- Owner: metonym
- License: mit
- Created: 2020-04-22T13:49:21.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-06-06T02:03:17.000Z (over 1 year ago)
- Last Synced: 2024-10-19T12:16:19.653Z (18 days ago)
- Topics: a11y, accessible, accordion, svelte, svelte-component, svelte-components, typescript-definitions, wai-aria
- Language: Svelte
- Homepage: https://metonym.github.io/svelte-accessible-accordion/
- Size: 310 KB
- Stars: 34
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-accessible-accordion
[![NPM][npm]][npm-url]
> Accessible accordion component for Svelte
`svelte-accessible-accordion` implements [WAI-ARIA design guidelines for an Accordion](https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html).
**Note**: This component is _unstyled_ by design. See the [Styling section](#styling).
Try it in the [Svelte REPL](https://svelte.dev/repl/85be3a105c3f4fe0892150380914be96).
---
## Installation
**Yarn**
```bash
yarn add -D svelte-accessible-accordion
```
**NPM**
```bash
npm i -D svelte-accessible-accordion
```
**pnpm**
```bash
pnpm i -D svelte-accessible-accordion
```
## Usage
### Basic
```svelte
import { Accordion, AccordionItem } from "svelte-accessible-accordion";
Content 1
Content 2
Content 2
```
### Slottable title
Customize the accordion title by using the `"title"` slot.
```svelte
Title 1
Content 1
Content 2
Content 2
```
### Multiselectable items
By default, only one accordion item can be expanded at one time.
Set `multiselect` to allow multiple items to be expandable.
```svelte
Content 1
Content 2
Content 2
```
### Expanded items
Use the `expanded` prop to expand an accordion item.
```svelte
Content 1
Content 2
Content 2
```
Bind to the `expanded` prop on the accordion item.
```svelte
import { Accordion, AccordionItem } from "svelte-accessible-accordion";
let expanded;
Content
```
### Disabled items
Set `disabled` to `true` to disable an accordion item
```svelte
Content 1
Content 2
Content 2
```
## Styling
Style the component by targeting the `[data-accordion]` and `[data-accordion-item]` attributes.
```css
[data-accordion] {
list-style: none;
}
[data-accordion-item] button {
border: 0;
border-radius: 0;
border-bottom: 1px solid #e0e0e0;
background: none;
font: inherit;
line-height: inherit;
color: inherit;
cursor: pointer;
padding: 0.5rem 1rem;
width: 100%;
text-align: left;
}
[data-accordion-item] button[disabled] {
opacity: 0.5;
cursor: not-allowed;
}
[data-accordion-item] [role="region"] {
padding: 1rem;
}
```
The semantic element structure resembles the following:
```yml
- ul [data-accordion] # Accordion
- li [data-accordion-item] # AccordionItem
- button
- [role="region"]
```
## API
### `Accordion` props
| Name | Type | Default value |
| :---------- | :-------- | :------------ |
| multiselect | `boolean` | `false` |
### `AccordionItem` props
| Name | Value | Default value |
| :------- | :----------------------- | :------------------------------------- |
| id | `string` | `"item" + Math.random().toString(36)"` |
| title | `string` or `slot:title` | `"Title"` |
| expanded | `boolean` | `false` |
| disabled | `boolean` | `false` |
| ref | `HTMLButtonElement` | `null` |
#### Forwarded events
- on:click
## TypeScript
Svelte version 3.31 or greater is required to use this component with TypeScript.
TypeScript definitions are located in the [types folder](./types).
## [Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/svelte-accessible-accordion.svg?style=for-the-badge&color=%23ff3e00
[npm-url]: https://npmjs.com/package/svelte-accessible-accordion