Components Showcase

Интерактивная демонстрация всех компонентов ViteKit Universal

Toast Уведомления

Всплывающие уведомления с автоматическим скрытием и анимациями

Типы уведомлений

// JavaScript API ToastComponent.success('Операция выполнена!'); ToastComponent.error('Произошла ошибка!'); ToastComponent.warning('Внимание!'); ToastComponent.info('Новая информация'); // HTML атрибуты <button data-toast-trigger="success" data-toast-title="Заголовок" data-toast-message="Сообщение"> Показать уведомление </button>

✨ Автоматическое скрытие

Уведомления автоматически исчезают через 4 секунды

📱 Адаптивность

Корректное отображение на всех устройствах

🎨 Типизация

4 типа: success, error, warning, info

🔧 API

Простой JavaScript API и HTML атрибуты

Модальные окна

Доступные модальные окна с поддержкой ARIA и клавиатурной навигации

Типы модальных окон

// JavaScript API MicroModal.show('modal-id'); MicroModal.close('modal-id'); // HTML разметка <div class="modal micromodal-slide" id="modal-id"> <div class="modal__overlay" data-micromodal-close> <div class="modal__container"> <header class="modal__header"> <h2 class="modal__title">Заголовок</h2> <button class="modal__close" data-micromodal-close></button> </header> <main class="modal__content">Содержимое</main> </div> </div> </div>

♿ Доступность

Полная поддержка ARIA и скрин-ридеров

⌨️ Клавиатура

Навигация через Tab, Enter, Escape

🎬 Анимации

Плавные анимации открытия и закрытия

🔒 Фокус

Автоматическое управление фокусом

Система табов

Адаптивные табы с поддержкой клавиатурной навигации

Интерактивные табы

Основные возможности

  • 📱 Адаптивность: Автоматическое превращение в аккордеон на мобильных
  • ⌨️ Клавиатурная навигация: Arrow keys, Home, End
  • 🎨 Кастомизация: Легко настраиваемые стили
  • 🚀 Производительность: Минимальный overhead

Как использовать

Создайте HTML структуру с нужными классами и добавьте атрибут data-tabs:

<div class="tabs" data-tabs> <div class="tabs__nav"> <button class="tabs__tab tabs__tab--active">Вкладка 1</button> <button class="tabs__tab">Вкладка 2</button> </div> <div class="tabs__content"> <div class="tabs__panel tabs__panel--active">Содержимое 1</div> <div class="tabs__panel">Содержимое 2</div> </div> </div>

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

Табы отлично подходят для:

  • Навигации по разделам контента
  • Организации форм по шагам
  • Переключения между видами данных
  • Фильтрации контента по категориям

JavaScript API

// Создание экземпляра const tabs = new TabsComponent(element, options); // Методы tabs.next(); // Следующая вкладка tabs.prev(); // Предыдущая вкладка tabs.goTo(2); // Перейти к вкладке по индексу // События element.addEventListener('tabchange', (e) => { console.log('Активна вкладка:', e.detail.index); });

Аккордеон

Сворачиваемые панели для экономии места с плавными анимациями

Интерактивный аккордеон

Особенности реализации

🎭 Анимации

Плавные CSS transitions с автоматическим расчетом высоты контента

♿ Доступность

Полная поддержка ARIA атрибутов и клавиатурной навигации

📐 Гибкость

Настраиваемое поведение: единичное или множественное раскрытие

🎨 Стилизация

Легко настраиваемые стили через CSS переменные и модификаторы

События

// Слушаем события аккордеона element.addEventListener('accordionopen', (e) => { console.log('Открыта панель:', e.detail.index); }); element.addEventListener('accordionclose', (e) => { console.log('Закрыта панель:', e.detail.index); });