@19h47/switch 中文文档教程

Question

@19h47/switch

Installation

yarn add @19h47/switch

HTML

<div tabindex="0" aria-checked="false" role="switch">
    <span>Toggle this switch element</span>
    <span></span>
    <div style="display: none;"><input type="checkbox" /></div>
</div>

JavaScript

import Switch from '@19h47/switch';

const $switch = document.querySelector('[role="switch"]');

const switchButton = new Switch($switch);
switchButton.init();

Keyboard support

Key	Function
Tab	Moves keyboard focus to the switch.
Space	Toggle switch between checked and unchecked.

Event

Event	Arguments	Description
Switch.activate
Switch.deactivate

import Switch from '@19h47/switch';

const $switch = document.querySelector('[role="switch"]');

const switchButton = new Switch($switch);
switchButton.init();

switchButton.on('Switch.deactivate', () => {
    console.log('deactivated');
});

switchButton.on('Switch.activate', () => {
    console.log('activated');
});

Acknowledgment

• switch
• Switch Design Pattern in WAI-ARIA Authoring Practices 1.1