@19h47/accordion 中文文档教程
@19h47/accordion
Sur un petit air d'accordéon Léon
Installation
yarn add @19h47/accordion
Usage
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
<div class="js-accordion">
<div class="js-accordion-panel" data-accordion-open="true" data-accordion-deselect="true">
<button
class="js-accordion-header"
type="button"
aria-expanded="true"
aria-controls="lorem"
>
Toggle
</button>
<div id="lorem" class="js-accordion-body" role="region">
<div class="js-accordion-inner">
Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas
quibusdam excepturi accusantium voluptatum facere. Nemo vero iste recusandae, at
magnam tenetur maxime ad optio veniam!<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestias
excepturi molestiae nesciunt alias. Nobis aut praesentium, commodi minus laborum
ullam at quod soluta qui tempore sit eveniet dicta esse.
</div>
</div>
</div>
</div>
Keyboard Support
Key | Function |
---|---|
Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Tab |
|
Shift + Tab |
|
Down Arrow |
|
Up Arrow |
|
Home | When focus is on an accordion header, moves focus to the first accordion header. |
End | When focus is on an accordion header, moves focus to the last accordion header. |
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
region | div | Creates a landmark region that contains the currently expanded accordion panel. |
Option
选项可以设置为 data-attribute
。
Open
面板是否打开。
<button data-accordion-open="true">Button</button>
Deselect
是否可以取消选择面板。
<button data-accordion-deselect="true">Button</button>
Event
Open
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
accordion.panels.forEach(panel => {
panel.rootElement.addEventListener('Panel.open', ({ type, detail }) => {
console.log({ type, detail });
});
});
Close
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
accordion.panels.forEach(panel => {
panel.rootElement.addEventListener('Panel.close', ({ type, detail }) => {
console.log({ type, detail });
});
});
Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn start
# build for production
$ yarn prod
Example
Acknowledgments
@19h47/accordion
Sur un petit air d'accordéon Léon
Installation
yarn add @19h47/accordion
Usage
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
<div class="js-accordion">
<div class="js-accordion-panel" data-accordion-open="true" data-accordion-deselect="true">
<button
class="js-accordion-header"
type="button"
aria-expanded="true"
aria-controls="lorem"
>
Toggle
</button>
<div id="lorem" class="js-accordion-body" role="region">
<div class="js-accordion-inner">
Sit amet, consectetur adipisicing elit. Omnis ex inventore tempore. Quam voluptas
quibusdam excepturi accusantium voluptatum facere. Nemo vero iste recusandae, at
magnam tenetur maxime ad optio veniam!<br />
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, molestias
excepturi molestiae nesciunt alias. Nobis aut praesentium, commodi minus laborum
ullam at quod soluta qui tempore sit eveniet dicta esse.
</div>
</div>
</div>
</div>
Keyboard Support
Key | Function |
---|---|
Space or Enter | When focus is on the accordion header of a collapsed section, expands the section. |
Tab |
|
Shift + Tab |
|
Down Arrow |
|
Up Arrow |
|
Home | When focus is on an accordion header, moves focus to the first accordion header. |
End | When focus is on an accordion header, moves focus to the last accordion header. |
Role, Property, State, and Tabindex Attributes
Role | Attribute | Element | Usage |
---|---|---|---|
region | div | Creates a landmark region that contains the currently expanded accordion panel. |
Option
Options can be set as data-attribute
.
Open
Is the panel open or not.
<button data-accordion-open="true">Button</button>
Deselect
Can the panel be deselected or not.
<button data-accordion-deselect="true">Button</button>
Event
Open
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
accordion.panels.forEach(panel => {
panel.rootElement.addEventListener('Panel.open', ({ type, detail }) => {
console.log({ type, detail });
});
});
Close
import Accordion from '@19h47/accordion';
const $element = document.querySelector('.js-accordion');
const accordion = new Accordion($element);
accordion.init();
accordion.panels.forEach(panel => {
panel.rootElement.addEventListener('Panel.close', ({ type, detail }) => {
console.log({ type, detail });
});
});
Build Setup
# install dependencies
$ yarn install
# serve with hot reload at localhost:3000
$ yarn start
# build for production
$ yarn prod
Example
An example is located right here, see sources.