234 lines
12 KiB
HTML
234 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Демонстрация компонентов - ViteKit Universal</title>
|
||
<link rel="stylesheet" href="/src/styles/main.scss">
|
||
</head>
|
||
<body data-page="showcase">
|
||
<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="/" class="nav__link">Главная</a>
|
||
</li>
|
||
<li class="nav__item">
|
||
<a href="/components-demo.html" class="nav__link nav__link--active">Компоненты</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="main">
|
||
<div class="demo-header">
|
||
<div class="container">
|
||
<h1>Демонстрация компонентов</h1>
|
||
<p>Интерактивные примеры всех доступных UI компонентов</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Toast Уведомления -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Toast Уведомления</h2>
|
||
<p>Современные всплывающие уведомления с автоматическим скрытием</p>
|
||
|
||
<div class="demo-grid">
|
||
<button class="btn btn--primary" data-toast-trigger="success"
|
||
data-toast-title="Успех!" data-toast-message="Операция выполнена успешно">
|
||
Показать Success
|
||
</button>
|
||
<button class="btn btn--danger" data-toast-trigger="error"
|
||
data-toast-title="Ошибка!" data-toast-message="Что-то пошло не так">
|
||
Показать Error
|
||
</button>
|
||
<button class="btn btn--warning" data-toast-trigger="warning"
|
||
data-toast-title="Внимание!" data-toast-message="Будьте осторожны">
|
||
Показать Warning
|
||
</button>
|
||
<button class="btn btn--info" data-toast-trigger="info"
|
||
data-toast-title="Информация" data-toast-message="Полезная информация">
|
||
Показать Info
|
||
</button>
|
||
</div>
|
||
|
||
<div class="demo-code">
|
||
<pre><code>// Показать toast уведомление
|
||
ToastComponent.success('Операция успешна!', {
|
||
title: 'Готово!',
|
||
duration: 4000
|
||
});
|
||
|
||
// Использование через data-атрибуты
|
||
<button data-toast-trigger="success"
|
||
data-toast-title="Успех!"
|
||
data-toast-message="Операция выполнена">
|
||
Показать уведомление
|
||
</button></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Модальные окна -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Модальные окна</h2>
|
||
<p>Доступные модальные окна с поддержкой клавиатуры и фокуса</p>
|
||
|
||
<div class="demo-grid">
|
||
<button class="btn btn--primary" data-micromodal-trigger="modal-demo">
|
||
Открыть модальное окно
|
||
</button>
|
||
</div>
|
||
|
||
<div class="demo-code">
|
||
<pre><code>// Открыть модальное окно программно
|
||
MicroModal.show('modal-id');
|
||
|
||
// Использование через data-атрибуты
|
||
<button data-micromodal-trigger="modal-id">
|
||
Открыть модал
|
||
</button></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Табы -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Адаптивные табы</h2>
|
||
<p>Табы, которые превращаются в аккордеон на мобильных устройствах</p>
|
||
|
||
<div class="tabs" data-tabs>
|
||
<div class="tabs__nav">
|
||
<button class="tabs__tab tabs__tab--active" data-tab="demo-tab-1">Первая вкладка</button>
|
||
<button class="tabs__tab" data-tab="demo-tab-2">Вторая вкладка</button>
|
||
<button class="tabs__tab" data-tab="demo-tab-3">Третья вкладка</button>
|
||
</div>
|
||
<div class="tabs__content">
|
||
<div class="tabs__panel tabs__panel--active" id="demo-tab-1-panel" data-panel="demo-tab-1">
|
||
<p>Содержимое первой вкладки. Здесь может быть любой контент.</p>
|
||
</div>
|
||
<div class="tabs__panel" id="demo-tab-2-panel" data-panel="demo-tab-2">
|
||
<p>Содержимое второй вкладки с другой информацией.</p>
|
||
</div>
|
||
<div class="tabs__panel" id="demo-tab-3-panel" data-panel="demo-tab-3">
|
||
<p>Содержимое третьей вкладки для демонстрации функциональности.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-code">
|
||
<pre><code>// HTML структура табов
|
||
<div class="tabs" data-tabs>
|
||
<div class="tabs__nav">
|
||
<button class="tabs__tab tabs__tab--active" data-tab="tab-1">
|
||
Первая вкладка
|
||
</button>
|
||
</div>
|
||
<div class="tabs__content">
|
||
<div class="tabs__panel tabs__panel--active" data-panel="tab-1">
|
||
Содержимое вкладки
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Аккордеон -->
|
||
<section class="showcase-section">
|
||
<div class="container">
|
||
<h2>Аккордеон</h2>
|
||
<p>Складывающиеся секции с плавными анимациями</p>
|
||
|
||
<div class="accordion" data-accordion>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="demo-acc-1" aria-expanded="false">
|
||
<span>Что такое ViteKit Universal?</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" id="demo-acc-1-content" data-accordion-content="demo-acc-1" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<p>ViteKit Universal - это современный универсальный сборщик проектов, который объединяет Vite, Twig, SCSS и готовые UI компоненты для быстрой разработки.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="demo-acc-2" aria-expanded="false">
|
||
<span>Какие компоненты включены?</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" id="demo-acc-2-content" data-accordion-content="demo-acc-2" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<p>В комплект входят: модальные окна, табы, аккордеон, toast уведомления, формы, кнопки и многое другое.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="demo-acc-3" aria-expanded="false">
|
||
<span>Как начать использовать?</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" id="demo-acc-3-content" data-accordion-content="demo-acc-3" aria-hidden="true">
|
||
<div class="accordion__body">
|
||
<p>Просто клонируйте репозиторий, установите зависимости командой <code>npm install</code> и запустите <code>npm run dev</code>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="demo-code">
|
||
<pre><code>// HTML структура аккордеона
|
||
<div class="accordion" data-accordion>
|
||
<div class="accordion__item">
|
||
<button class="accordion__header" data-accordion-trigger="acc-1">
|
||
<span>Заголовок</span>
|
||
<span class="accordion__icon"></span>
|
||
</button>
|
||
<div class="accordion__content" data-accordion-content="acc-1">
|
||
<div class="accordion__body">
|
||
Содержимое аккордеона
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Модальное окно для демонстрации -->
|
||
<div class="modal micromodal-slide" id="modal-demo" 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>Это пример модального окна с полной поддержкой accessibility:</p>
|
||
<ul>
|
||
<li>✅ Управление клавиатурой (Tab, Esc)</li>
|
||
<li>✅ Фокус и ARIA атрибуты</li>
|
||
<li>✅ Плавные анимации</li>
|
||
<li>✅ Закрытие по клику вне окна</li>
|
||
</ul>
|
||
</main>
|
||
<footer class="modal__footer">
|
||
<button class="btn btn--secondary" data-micromodal-close>Закрыть</button>
|
||
<button class="btn btn--primary">Действие</button>
|
||
</footer>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script type="module" src="/src/scripts/main.js"></script>
|
||
</body>
|
||
</html> |