Spinbutton
Новый HTML-тег <cb-spinbutton> в роли вращающейся кнопки, в основном для телефонов.<cb-spinbutton>
<cb-slot data-value="1" data-text="text1">Опция 1</cb-slot>
<cb-slot data-value="2" data-text="text2">Опция 2</cb-slot>
<cb-slot data-value="3" data-text="text3" data-selected>Опция 3</cb-slot>
<cb-slot data-value="4" data-text="text4">Опция 4</cb-slot>
<cb-slot data-value="5" data-text="text5">Опция 5</cb-slot>
<cb-slot data-value="6" data-text="text6">Опция 6</cb-slot>
</cb-spinbutton>Атрибуты
data-selected
Выбранная опция.
data-value
Если не указывать, значение будет таким же, как название опции.
data-text
Если в опциях сокращённые названия, рекомендуется добавить полные для вспомогательных технологий.
loop
Зациклить первую и последнюю опцию в бесконечном вращении.
data-mini
По одной опции вокруг центральной, вместо двух.
<cb-spinbutton data-mini>
<cb-slot data-value="1" data-text="text1">Опция 1</cb-slot>
<cb-slot data-value="2" data-text="text2">Опция 2</cb-slot>
<cb-slot data-value="3" data-text="text3" data-selected>Опция 3</cb-slot>
<cb-slot data-value="4" data-text="text4">Опция 4</cb-slot>
<cb-slot data-value="5" data-text="text5">Опция 5</cb-slot>
<cb-slot data-value="6" data-text="text6">Опция 6</cb-slot>
</cb-spinbutton>JavaScript
const spinbutton = document.querySelector('cb-spinbutton')spinbutton.wheelIndex = 3
Установить опцию с индексом 3
spinbutton.setSlots(slots, index = 0, slotNames, slotAriaValueText)
Пересоздать кнопку. Аргументы: массив значений; выбранная опция; массив названий; массив полных названий, на случай если "массив названий" был из сокращений.
События
input
Событие переключения слота.
spinbutton.addEventListener('change', callback)