@19h47/spinbutton 中文文档教程

Question

@19h47/spinbutton

旋转按钮是一种输入小部件，它将其值限制为一组或一组离散值。

HTML

<div role="spinbutton" aria-valuemin="0" aria-valuemax="100" aria-valuenow="10">
    <button class="js-decrease" tabindex="-1" aria-label="decrease" type="button">-</button>

    <input type="number" />

    <button class="js-increase" tabindex="-1" aria-label="increase" type="button">+</button>
</div>

JavaScript

import SpinButton from '@19h47/spinbutton';

const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new SpinButton($element);

spinbutton.init();

Events

Event	Args	Description
SpinButton.change	value	Return the current activate value

import SpinButton from '@19h47/spinbutton';

const $element = document.querySelector('[role="spinbutton"]');
const spinbutton = new SpinButton($element);

spinbutton.init();

spinbutton.on('SpinButton.change', value => {
    console.log(value);
});

Options

Option	Type
text	object	Object containing single and plural text. Can be set as data attribute data-spinbutton-text

Keyboard Support

旋转按钮提供旋转按钮设计模式中描述的以下键盘支持。

Key	Function
Down Arrow	Decreases value 1 step.
Up Arrow	Increases the value 1 step.
Page Down	Decreases the value 5 steps.
Page Up	Increases the value 5 steps.
Home	Decreases to mimimum value.
End	Increases to maximum value.

Role, Property, State, and Tabindex Attributes

Role	Attribute	Element	Usage
spinbutton		div	Identifies the div element as a spinbutton.

References

WAI-ARIA 创作实践 1.1 中的旋转按钮设计模式