496 lines
25 KiB
HTML
496 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Components Showcase - ViteKit Universal</title>
|
||
<link rel="stylesheet" href="src/styles/main.scss">
|
||
<style>
|
||
/* Showcase specific styles */
|
||
.showcase-header {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 4rem 0;
|
||
text-align: center;
|
||
}
|
||
|
||
.showcase-section {
|
||
padding: 3rem 0;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.showcase-section:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.component-demo {
|
||
background: #f9fafb;
|
||
padding: 2rem;
|
||
border-radius: 8px;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.demo-controls {
|
||
display: flex;
|
||
gap: 1rem;
|
||
margin-bottom: 2rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.demo-code {
|
||
background: #1f2937;
|
||
color: #e5e7eb;
|
||
padding: 1rem;
|
||
border-radius: 6px;
|
||
font-family: 'Courier New', monospace;
|
||
font-size: 0.875rem;
|
||
overflow-x: auto;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1.5rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.feature-card {
|
||
background: white;
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.interactive-demo {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 2rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.interactive-demo {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<header class="header">
|
||
<div class="container">
|
||
<nav class="nav">
|
||
<div class="nav__brand">
|
||
<a href="/" class="nav__logo">ViteKit Universal</a>
|
||
</div>
|
||
<ul class="nav__menu">
|
||
<li class="nav__item">
|
||
<a href="index.html" class="nav__link">Главная</a>
|
||
</li>
|
||
<li class="nav__item">
|
||
<a href="showcase.html" class="nav__link nav__link--active">Showcase</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Showcase Header -->
|
||
<div class="showcase-header">
|
||
<div class="container">
|
||
<h1>Components Showcase</h1>
|
||
<p>Интерактивная демонстрация всех компонентов ViteKit Universal</p>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="main">
|
||
<!-- Toast Notifications -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Toast Уведомления</h2>
|
||
<p>Всплывающие уведомления с автоматическим скрытием и анимациями</p>
|
||
|
||
<div class="component-demo">
|
||
<h3>Типы уведомлений</h3>
|
||
<div class="demo-controls">
|
||
<button class="btn btn--success" data-toast-trigger="success"
|
||
data-toast-title="Успешно!" data-toast-message="Операция выполнена успешно">
|
||
Success Toast
|
||
</button>
|
||
<button class="btn btn--error" data-toast-trigger="error"
|
||
data-toast-title="Ошибка!" data-toast-message="Произошла ошибка при выполнении операции">
|
||
Error Toast
|
||
</button>
|
||
<button class="btn btn--warning" data-toast-trigger="warning"
|
||
data-toast-title="Предупреждение!" data-toast-message="Проверьте введенные данные">
|
||
Warning Toast
|
||
</button>
|
||
<button class="btn btn--secondary" data-toast-trigger="info"
|
||
data-toast-title="Информация" data-toast-message="Новая версия доступна для скачивания">
|
||
Info Toast
|
||
</button>
|
||
</div>
|
||
|
||
<div class="demo-code">
|
||
// JavaScript API
|
||
ToastComponent.success('Операция выполнена!');
|
||
ToastComponent.error('Произошла ошибка!');
|
||
ToastComponent.warning('Внимание!');
|
||
ToastComponent.info('Новая информация');
|
||
|
||
// HTML атрибуты
|
||
<button data-toast-trigger="success"
|
||
data-toast-title="Заголовок"
|
||
data-toast-message="Сообщение">
|
||
Показать уведомление
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>✨ Автоматическое скрытие</h4>
|
||
<p>Уведомления автоматически исчезают через 4 секунды</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>📱 Адаптивность</h4>
|
||
<p>Корректное отображение на всех устройствах</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>🎨 Типизация</h4>
|
||
<p>4 типа: success, error, warning, info</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>🔧 API</h4>
|
||
<p>Простой JavaScript API и HTML атрибуты</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Modal Windows -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Модальные окна</h2>
|
||
<p>Доступные модальные окна с поддержкой ARIA и клавиатурной навигации</p>
|
||
|
||
<div class="component-demo">
|
||
<h3>Типы модальных окон</h3>
|
||
<div class="demo-controls">
|
||
<button class="btn btn--primary" data-micromodal-trigger="modal-basic">
|
||
Базовое модальное окно
|
||
</button>
|
||
<button class="btn btn--secondary" data-micromodal-trigger="modal-form">
|
||
Модальное окно с формой
|
||
</button>
|
||
<button class="btn btn--outline" data-micromodal-trigger="modal-confirmation">
|
||
Окно подтверждения
|
||
</button>
|
||
</div>
|
||
|
||
<div class="demo-code">
|
||
// 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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4>♿ Доступность</h4>
|
||
<p>Полная поддержка ARIA и скрин-ридеров</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>⌨️ Клавиатура</h4>
|
||
<p>Навигация через Tab, Enter, Escape</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>🎬 Анимации</h4>
|
||
<p>Плавные анимации открытия и закрытия</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>🔒 Фокус</h4>
|
||
<p>Автоматическое управление фокусом</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tabs -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Система табов</h2>
|
||
<p>Адаптивные табы с поддержкой клавиатурной навигации</p>
|
||
|
||
<div class="component-demo">
|
||
<h3>Интерактивные табы</h3>
|
||
<div class="tabs" data-tabs>
|
||
<div class="tabs__nav">
|
||
<button class="tabs__tab tabs__tab--active" data-tab="features">Возможности</button>
|
||
<button class="tabs__tab" data-tab="usage">Использование</button>
|
||
<button class="tabs__tab" data-tab="examples">Примеры</button>
|
||
<button class="tabs__tab" data-tab="api">API</button>
|
||
</div>
|
||
<div class="tabs__content">
|
||
<div class="tabs__panel tabs__panel--active" data-panel="features">
|
||
<h4>Основные возможности</h4>
|
||
<ul>
|
||
<li>📱 <strong>Адаптивность:</strong> Автоматическое превращение в аккордеон на мобильных</li>
|
||
<li>⌨️ <strong>Клавиатурная навигация:</strong> Arrow keys, Home, End</li>
|
||
<li>🎨 <strong>Кастомизация:</strong> Легко настраиваемые стили</li>
|
||
<li>🚀 <strong>Производительность:</strong> Минимальный overhead</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tabs__panel" data-panel="usage">
|
||
<h4>Как использовать</h4>
|
||
<p>Создайте HTML структуру с нужными классами и добавьте атрибут <code>data-tabs</code>:</p>
|
||
<div class="demo-code">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<div class="tabs__panel" data-panel="examples">
|
||
<h4>Примеры использования</h4>
|
||
<p>Табы отлично подходят для:</p>
|
||
<ul>
|
||
<li>Навигации по разделам контента</li>
|
||
<li>Организации форм по шагам</li>
|
||
<li>Переключения между видами данных</li>
|
||
<li>Фильтрации контента по категориям</li>
|
||
</ul>
|
||
</div>
|
||
<div class="tabs__panel" data-panel="api">
|
||
<h4>JavaScript API</h4>
|
||
<div class="demo-code">
|
||
// Создание экземпляра
|
||
const tabs = new TabsComponent(element, options);
|
||
|
||
// Методы
|
||
tabs.next(); // Следующая вкладка
|
||
tabs.prev(); // Предыдущая вкладка
|
||
tabs.goTo(2); // Перейти к вкладке по индексу
|
||
|
||
// События
|
||
element.addEventListener('tabchange', (e) => {
|
||
console.log('Активна вкладка:', e.detail.index);
|
||
});
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Accordion -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Аккордеон</h2>
|
||
<p>Сворачиваемые панели для экономии места с плавными анимациями</p>
|
||
|
||
<div class="interactive-demo">
|
||
<div>
|
||
<h3>Интерактивный аккордеон</h3>
|
||
<div class="accordion" data-accordion>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="acc-features" aria-expanded="false">
|
||
<span>🚀 Возможности аккордеона</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" data-accordion-content="acc-features" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<ul>
|
||
<li><strong>Плавные анимации:</strong> CSS transitions для smooth UX</li>
|
||
<li><strong>Множественное раскрытие:</strong> Настраиваемое поведение</li>
|
||
<li><strong>Клавиатурная навигация:</strong> Полная поддержка a11y</li>
|
||
<li><strong>Автоматические ARIA атрибуты:</strong> Доступность из коробки</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="acc-usage" aria-expanded="false">
|
||
<span>💡 Использование в проектах</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" data-accordion-content="acc-usage" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<p>Аккордеон идеален для:</p>
|
||
<ul>
|
||
<li>FAQ секций</li>
|
||
<li>Списков продуктов с детальной информацией</li>
|
||
<li>Документации с разворачиваемыми разделами</li>
|
||
<li>Фильтров в боковых панелях</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="acc-config" aria-expanded="false">
|
||
<span>⚙️ Настройки и конфигурация</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" data-accordion-content="acc-config" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<div class="demo-code">
|
||
// Опции конфигурации
|
||
const accordion = new AccordionComponent(element, {
|
||
allowMultiple: false, // Разрешить открытие нескольких панелей
|
||
animationDuration: 300, // Длительность анимации в мс
|
||
autoClose: true, // Автозакрытие других панелей
|
||
keyboardNavigation: true // Клавиатурная навигация
|
||
});
|
||
|
||
// API методы
|
||
accordion.open(0); // Открыть панель по индексу
|
||
accordion.close(1); // Закрыть панель
|
||
accordion.toggle(2); // Переключить панель
|
||
accordion.closeAll(); // Закрыть все панели
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h3>Особенности реализации</h3>
|
||
<div class="feature-grid" style="grid-template-columns: 1fr;">
|
||
<div class="feature-card">
|
||
<h4>🎭 Анимации</h4>
|
||
<p>Плавные CSS transitions с автоматическим расчетом высоты контента</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>♿ Доступность</h4>
|
||
<p>Полная поддержка ARIA атрибутов и клавиатурной навигации</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>📐 Гибкость</h4>
|
||
<p>Настраиваемое поведение: единичное или множественное раскрытие</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4>🎨 Стилизация</h4>
|
||
<p>Легко настраиваемые стили через CSS переменные и модификаторы</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h4>События</h4>
|
||
<div class="demo-code">
|
||
// Слушаем события аккордеона
|
||
element.addEventListener('accordionopen', (e) => {
|
||
console.log('Открыта панель:', e.detail.index);
|
||
});
|
||
|
||
element.addEventListener('accordionclose', (e) => {
|
||
console.log('Закрыта панель:', e.detail.index);
|
||
});
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Modals -->
|
||
<div class="modal micromodal-slide" id="modal-basic" aria-hidden="true">
|
||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||
<div class="modal__container" role="dialog" aria-modal="true">
|
||
<header class="modal__header">
|
||
<h2 class="modal__title">Базовое модальное окно</h2>
|
||
<button class="modal__close" aria-label="Закрыть" data-micromodal-close></button>
|
||
</header>
|
||
<main class="modal__content">
|
||
<p>Это базовое модальное окно с минимальным содержимым. Оно демонстрирует:</p>
|
||
<ul>
|
||
<li>Правильную структуру HTML</li>
|
||
<li>ARIA атрибуты для доступности</li>
|
||
<li>Анимации открытия и закрытия</li>
|
||
<li>Управление фокусом</li>
|
||
</ul>
|
||
<p>Закрыть окно можно кликом на overlay, кнопку закрытия или нажатием Escape.</p>
|
||
</main>
|
||
<footer class="modal__footer">
|
||
<button class="btn btn--secondary" data-micromodal-close>Закрыть</button>
|
||
<button class="btn btn--primary">Понятно</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal micromodal-slide" id="modal-form" aria-hidden="true">
|
||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||
<div class="modal__container" role="dialog" aria-modal="true">
|
||
<header class="modal__header">
|
||
<h2 class="modal__title">Модальное окно с формой</h2>
|
||
<button class="modal__close" aria-label="Закрыть" data-micromodal-close></button>
|
||
</header>
|
||
<main class="modal__content">
|
||
<form class="modal-form">
|
||
<div class="form-group">
|
||
<label for="modal-name" class="form-label">Имя</label>
|
||
<input type="text" id="modal-name" class="form-control" placeholder="Введите ваше имя">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal-email" class="form-label">Email</label>
|
||
<input type="email" id="modal-email" class="form-control" placeholder="example@email.com">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal-message" class="form-label">Сообщение</label>
|
||
<textarea id="modal-message" class="form-control" rows="3" placeholder="Ваше сообщение"></textarea>
|
||
</div>
|
||
</form>
|
||
</main>
|
||
<footer class="modal__footer">
|
||
<button class="btn btn--secondary" data-micromodal-close>Отмена</button>
|
||
<button class="btn btn--primary">Отправить</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal micromodal-slide" id="modal-confirmation" aria-hidden="true">
|
||
<div class="modal__overlay" tabindex="-1" data-micromodal-close>
|
||
<div class="modal__container" role="dialog" aria-modal="true">
|
||
<header class="modal__header">
|
||
<h2 class="modal__title">Подтверждение действия</h2>
|
||
<button class="modal__close" aria-label="Закрыть" data-micromodal-close></button>
|
||
</header>
|
||
<main class="modal__content">
|
||
<p>Вы уверены, что хотите выполнить это действие?</p>
|
||
<p><strong>Внимание:</strong> Это действие нельзя будет отменить.</p>
|
||
</main>
|
||
<footer class="modal__footer">
|
||
<button class="btn btn--secondary" data-micromodal-close>Отмена</button>
|
||
<button class="btn btn--error">Подтвердить</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="src/scripts/main.js"></script>
|
||
</body>
|
||
</html> |