Skeleton Tabs

Плагин для управления табами на странице с использованием классов RadioTabs и CheckboxTabs. Этот плагин позволяет легко создавать интерактивные вкладки и переключатели на вашей веб-странице без зависимости от сторонних библиотек.

Оглавление

• Установка
  • Через npm
  • Подключение через тег <script>
• Использование
  • Импорт плагина
    • ES6 Modules
    • CommonJS
    • Через глобальные переменные
  • [Инициализация табов](#инициализация табов)
    • RadioTabs
    • CheckboxTabs
• Документация
  • RadioTabs
    • Описание
    • Конструктор
    • Методы
    • Пример использования
  • CheckboxTabs
    • Описание
    • Конструктор
    • Методы
    • Пример использования
• Лицензия
• Контакты
• Вклад

Установка

Через npm

Если вы используете пакетный менеджер npm, вы можете установить плагин с помощью следующей команды:

npm install skeleton-tabs

Подключение через тег <script>

Скачайте файл skeleton-tabs.min.js из папки dist или из релизов GitHub и подключите его в вашем HTML-файле:

<script src="path/to/skeleton-tabs.min.js"></script>

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

Импорт плагина

ES6 Modules

Если вы используете сборщик модулей или поддерживаете ES6-модули, вы можете импортировать плагин следующим образом:

import { RadioTabs, CheckboxTabs } from 'skeleton-tabs';

CommonJS

Если ваш проект использует CommonJS (например, в Node.js или с использованием require), импортируйте плагин так:

const { RadioTabs, CheckboxTabs } = require('skeleton-tabs');

Через глобальные переменные

Если вы подключили плагин через тег <script>, классы доступны через объект SkeletonTabs:

<script src="path/to/skeleton-tabs.min.js"></script>
<script>
  const { RadioTabs, CheckboxTabs } = SkeletonTabs;
  // Ваш код здесь
</script>

Инициализация табов

RadioTabs

HTML-разметка:

<!-- Кнопки -->
<button data-skeleton-tabs-button="myRadioTabs" data-value="tab1">Таб 1</button>
<button data-skeleton-tabs-button="myRadioTabs" data-value="tab2">Таб 2</button>
<button data-skeleton-tabs-button="myRadioTabs" data-value="tab3">Таб 3</button>

<!-- Контент -->
<div data-skeleton-tabs-content="myRadioTabs" data-value="tab1">Контент для Таба 1</div>
<div data-skeleton-tabs-content="myRadioTabs" data-value="tab2">Контент для Таба 2</div>
<div data-skeleton-tabs-content="myRadioTabs" data-value="tab3">Контент для Таба 3</div>

JavaScript:

new RadioTabs({
  name: 'myRadioTabs',
  activeClass: 'active' // Необязательно, по умолчанию 'active'
});

CheckboxTabs

HTML-разметка:

<!-- Кнопки -->
<button data-skeleton-tabs-button="interactive" data-value="a">Опция A</button>
<button data-skeleton-tabs-button="interactive" data-value="b">Опция B</button>
<button data-skeleton-tabs-button="interactive" data-value="c">Опция C</button>

<!-- Контент -->
<div data-skeleton-tabs-content="interactive" data-value="a">Контент для A</div>
<div data-skeleton-tabs-content="interactive" data-value="b">Контент для B</div>
<div data-skeleton-tabs-content="interactive" data-value="c">Контент для C</div>
<div data-skeleton-tabs-content="interactive" data-value="ab">Контент для A+B</div>
<div data-skeleton-tabs-content="interactive" data-value="abc">Контент для A+B+C</div>
<!-- Добавьте контент для необходимых комбинаций -->

JavaScript:

new CheckboxTabs({
  name: 'interactive',
  activeClass: 'active' // Необязательно, по умолчанию 'active'
});

Документация

RadioTabs

Описание

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

Конструктор

new RadioTabs(options: {
  name: string;
  activeClass?: string;
});

• options.name: (строка) Имя группы табов. Должно совпадать с значением в data-skeleton-tabs-button и data-skeleton-tabs-content.
• options.activeClass: (строка, необязательный) Класс, который будет добавляться активным элементам. По умолчанию 'active'.

Методы

• switchTab(newValue: string): void

  Переключает активный таб на указанный newValue.

Пример использования

HTML-разметка:

<button data-skeleton-tabs-button="profileTabs" data-value="info">Информация</button>
<button data-skeleton-tabs-button="profileTabs" data-value="settings">Настройки</button>

<div data-skeleton-tabs-content="profileTabs" data-value="info">Контент информации</div>
<div data-skeleton-tabs-content="profileTabs" data-value="settings">Контент настроек</div>

JavaScript:

const profileTabs = new RadioTabs({
  name: 'profileTabs',
  activeClass: 'active-tab'
});

// Переключение таба программно
profileTabs.switchTab('settings');

CheckboxTabs

Описание

CheckboxTabs — класс для создания переключателей, где может быть активировано несколько опций одновременно. Отображаемый контент зависит от комбинации активных опций.

Конструктор

new CheckboxTabs(options: {
  name: string;
  activeClass?: string;
});

• options.name: (строка) Имя группы переключателей. Должно совпадать с значением в data-skeleton-tabs-button и data-skeleton-tabs-content.
• options.activeClass: (строка, необязательный) Класс, который будет добавляться активным элементам. По умолчанию 'active'.

Методы

• toggleValue(value: string): void

  Переключает состояние кнопки с указанным value.

Пример использования

HTML-разметка:

<button data-skeleton-tabs-button="filterOptions" data-value="red">Красный</button>
<button data-skeleton-tabs-button="filterOptions" data-value="green">Зеленый</button>
<button data-skeleton-tabs-button="filterOptions" data-value="blue">Синий</button>

<div data-skeleton-tabs-content="filterOptions" data-value="red">Контент красного</div>
<div data-skeleton-tabs-content="filterOptions" data-value="green">Контент зеленого</div>
<div data-skeleton-tabs-content="filterOptions" data-value="blue">Контент синего</div>
<div data-skeleton-tabs-content="filterOptions" data-value="redgreen">Контент красного и зеленого</div>
<!-- Добавьте контент для необходимых комбинаций -->

JavaScript:

const filterOptions = new CheckboxTabs({
  name: 'filterOptions',
  activeClass: 'selected'
});

// Переключение опции программно
filterOptions.toggleValue('blue');

Лицензия

Этот проект лицензирован под лицензией ISC. Подробнее в файле LICENSE.

Контакты

• Автор: Vlad Shuian
• Email: [email protected]
• GitHub: Ваш профиль GitHub

Вклад

Мы приветствуем вклад сообщества! Если вы нашли ошибку или хотите предложить улучшения, пожалуйста, создайте issue или отправьте pull request в репозиторий проекта.

Шаги для вклада:

1. Форкните репозиторий.
2. Создайте ветку для вашей функции или исправления (git checkout -b feature/my-feature).
3. Сделайте коммиты ваших изменений (git commit -am 'Добавлена новая функция').
4. Запушьте ветку (git push origin feature/my-feature).
5. Создайте pull request.

Дополнительная информация

Поддерживаемые браузеры

Плагин совместим со всеми современными браузерами, поддерживающими ES6.

Зависимости

Плагин не имеет внешних зависимостей и работает без использования сторонних библиотек.

Стилизация

Вы можете применять собственные стили к кнопкам и контенту. Главное — обеспечьте наличие класса активности (active или ваш собственный) для корректного отображения активных элементов.

Пример CSS:

button.active {
  background-color: #007bff;
  color: #fff;
}

[data-skeleton-tabs-content] {
  display: none;
}

[data-skeleton-tabs-content].active {
  display: block;
}

Важные замечания

• Убедитесь, что значения data-value уникальны для каждой кнопки и соответствующего контента.
• Для CheckboxTabs комбинации значений должны быть прописаны в data-value контента в том же порядке, что и объединение активных значений кнопок.

Часто задаваемые вопросы

1. Можно ли использовать плагин с другими фреймворками, такими как React или Vue?

Да, плагин можно использовать в любом проекте, однако помните, что он напрямую взаимодействует с DOM. В средах с виртуальным DOM (как в React или Vue) рекомендуется оборачивать использование плагина в соответствующие компоненты или использовать хуки жизненного цикла для инициализации.

2. Что происходит, если нет контента для комбинации активных опций в CheckboxTabs?

Если нет соответствующего контента для текущей комбинации активных опций, никакой контент не будет отображен. Убедитесь, что вы предусмотрели все необходимые комбинации.

3. Как изменить класс активности после инициализации?

Класс активности задается при инициализации и не может быть изменен после. Если вам нужно изменить класс активности, создайте новый экземпляр класса с нужными параметрами.

История версий

• 1.0.0
  • Первая стабильная версия плагина.
  • Добавлены классы RadioTabs и CheckboxTabs.
  • Реализована поддержка ES6 и CommonJS модулей.
  • Добавлены определения типов TypeScript.

Благодарности

Спасибо всем, кто помогал в разработке этого плагина и предоставлял обратную связь для его улучшения.

Вернуться к началу