Tabs
Новый HTML-тег <cb-tabs> в роли списка вкладок (tablist).<cb-tabs>
<div class="cb-tab" role="tab">Опция 1</div>
<div class="cb-tab" role="tab">Опция 2</div>
<div class="cb-tab" role="tab">Опция 3</div>
<div class="cb-tab" role="tab">Опция 4</div>
</cb-tabs>Опция 1
Опция 2
Опция 3
Опция 4
Кнопки навигации
<cb-tabs-nav>
<cb-tabs>
<div class="cb-tab" role="tab">Опция 1</div>
<div class="cb-tab" role="tab">Опция 2</div>
<div class="cb-tab" role="tab">Опция 3</div>
<div class="cb-tab" role="tab">Опция 4</div>
<div class="cb-tab" role="tab">Опция 5</div>
<div class="cb-tab" role="tab">Опция 6</div>
<div class="cb-tab" role="tab">Опция 7</div>
<div class="cb-tab" role="tab">Опция 8</div>
</cb-tabs>
</cb-tabs-nav>Опция 1
Опция 2
Опция 3
Опция 4
Опция 5
Опция 6
Опция 7
Опция 8
Атрибуты
role="tab"
Вкладка (tab).
aria-selected="true"
Выбранная вкладка (tab). По умолчанию выбрана первая.
JavaScript
const tabs = document.querySelector('cb-tabs')tabs.selectedIndex = 3
Выбрать вкладку с индексом 3.
События
change
Событие переключения вкладок.
tabs.addEventListener('change', callback)