Graph-tabs

Простая и легкая JavaScript-библиотека для табов

Особенности

• Никаких зависимостей. Библиотека написана на чистом JavaScript, для работы не требуются иные библиотеки.
• Простота и функциональность. Вы можете легко и быстро подключить и использовать библиотеку, которая реализует важный функционал для табов
• Доступность. Табы отвечают всем правилам доступности.
• Настройка с помощью CSS. Вы можете легко менять внешний вид, расположение с помощью CSS.

Как работать с библиотекой

1. Скачайте последнюю версию библиотеки
2. Подключите graph-taba.min.css и graph-tabs.min.js из папки dist к странице
3. Поместите в ваш html-документ следующую разметку:

<div class="tabs" data-tabs="tab">
	<ul class="tabs__nav">
		<li class="tabs__nav-item"><button class="tabs__nav-btn" type="button">Один</button></li>
		<li class="tabs__nav-item"><button class="tabs__nav-btn" type="button">Два</button></li>
		<li class="tabs__nav-item"><button class="tabs__nav-btn" type="button">Три</button></li>
	</ul>
	<div class="tabs__content">
		<div class="tabs__panel">Один контент</div>
		<div class="tabs__panel">Два контент</div>
		<div class="tabs__panel">Три контент</div>
	</div>
</div>

Важный нюанс

data-tabs - важный дата-атрибут, через который и работает все взаимодействие с плагином. Значение этого атрибута должно быть уникальным для страницы.

4. Разместите следующий JS-код для подключения табов:

const tabs = new GraphTabs('tab');

Активация конкретного таба по событию

Вы можете сразу активировать нужный таб при загрузке страницы или любом другом событии с помощью метода switchTabs. Пример:

tabs1.switchTabs(document.querySelector('#tab3'));

События

Библиотека поддерживает одно событие:

1. Событие isChanged - срабатывает в момент переключения табов. Может принимать входной параметр - объект табов. Пример:

const tabs = new GraphTabs('tab', {
	isChanged: (tabs) => {
		console.log(tabs);
	}
});

Пример работы библиотеки вы можете увидеть, открыв файл index.html из папки demo в браузере.

Приятного пользования!