Вкладки

Реализуйте библиотеку для создания вкладок на сайте.

Основные возможности проекта

• Библиотека для создания вкладок.
• Поддержка горизонтальных и вертикальных вкладок.
• Анимация переключения контента.
• Настройка активной вкладки по умолчанию.
• Поддержка вкладок с иконками.
• Публикация на GitHub с документацией.

Функциональность библиотеки

Библиотека должна предоставлять следующие возможности:

• Создание вкладок из HTML-структуры.
• Переключение между вкладками с плавной анимацией.
• Поддержка двух ориентаций: горизонтальная (сверху) и вертикальная (слева).
• Настройка активной вкладки при инициализации.

Параметры настройки

При инициализации вкладок можно передавать параметры:

• activeTab - индекс активной вкладки (по умолчанию 0).
• orientation - ориентация вкладок (horizontal или vertical).
• animation - тип анимации (fade, slide).
• duration - длительность анимации (в миллисекундах).

Структура вкладок

Библиотека должна работать с HTML-структурой:

• Список заголовков вкладок (кнопки).
• Список панелей с контентом (каждая панель соответствует заголовку).
• При переключении вкладки активная панель отображается, остальные скрываются.

Использование библиотеки

Пример использования библиотеки:

• Подключить CSS-файл со стилями вкладок.
• Подключить JS-файл с библиотекой.
• Создать HTML-структуру вкладок.
• Инициализировать вкладки с настройками.

События

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

• onInit - после инициализации вкладок.
• onChange - при переключении вкладки (передается индекс новой активной вкладки).

Публикация на GitHub

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

• README.md с описанием и инструкцией по установке.
• Демо-страницей с примерами использования.
• Исходным кодом библиотеки.

Тестирование

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

• Разных браузерах (Chrome, Firefox, Safari, Edge).
• Разных ориентациях (горизонтальная, вертикальная).
• Разных типах содержимого (текст, картинки, формы).

Дополнительные возможности

• Поддержка вкладок с иконками (иконка + текст).
• Возможность программно переключать вкладки.
• Сохранение состояния активной вкладки в localStorage.