@19h47/accordion 中文文档教程

发布于 3年前 浏览 26 项目主页 更新于 3年前

@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

KeyFunction
Space or EnterWhen focus is on the accordion header of a collapsed section, expands the section.
Tab
  • Moves focus to the next focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab
  • Moves focus to the previous focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow
  • When focus is on an accordion header, moves focus to the next accordion header.
  • When focus is on last accordion header, moves focus to first accordion header.
Up Arrow
  • When focus is on an accordion header, moves focus to the previous accordion header.
  • When focus is on first accordion header, moves focus to last accordion header.
HomeWhen focus is on an accordion header, moves focus to the first accordion header.
EndWhen focus is on an accordion header, moves focus to the last accordion header.

Role, Property, State, and Tabindex Attributes

RoleAttributeElementUsage
regiondivCreates 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

KeyFunction
Space or EnterWhen focus is on the accordion header of a collapsed section, expands the section.
Tab
  • Moves focus to the next focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Shift + Tab
  • Moves focus to the previous focusable element.
  • All focusable elements in the accordion are included in the page Tab sequence.
Down Arrow
  • When focus is on an accordion header, moves focus to the next accordion header.
  • When focus is on last accordion header, moves focus to first accordion header.
Up Arrow
  • When focus is on an accordion header, moves focus to the previous accordion header.
  • When focus is on first accordion header, moves focus to last accordion header.
HomeWhen focus is on an accordion header, moves focus to the first accordion header.
EndWhen focus is on an accordion header, moves focus to the last accordion header.

Role, Property, State, and Tabindex Attributes

RoleAttributeElementUsage
regiondivCreates 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.

Acknowledgments

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文