Демонстрация компонентов

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

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

// Показать toast уведомление
ToastComponent.success('Операция успешна!', { 
  title: 'Готово!', 
  duration: 4000 
});

// Использование через data-атрибуты
<button data-toast-trigger="success" 
        data-toast-title="Успех!" 
        data-toast-message="Операция выполнена">
  Показать уведомление
</button>

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

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

// Открыть модальное окно программно
MicroModal.show('modal-id');

// Использование через data-атрибуты  
<button data-micromodal-trigger="modal-id">
  Открыть модал
</button>

Адаптивные табы

Табы, которые превращаются в аккордеон на мобильных устройствах

Содержимое первой вкладки. Здесь может быть любой контент.

Содержимое второй вкладки с другой информацией.

Содержимое третьей вкладки для демонстрации функциональности.

// 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>

Аккордеон

Складывающиеся секции с плавными анимациями

// 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>