DPK UI Components

Библиотека многофункциональных веб-компонентов, созданных с использованием Stencil.js. Компоненты разработаны с учетом принципов SOLID и предоставляют широкие возможности для кастомизации.

✨ Особенности

• 🎯 Независимые веб-компоненты
• 🎨 Широкие возможности кастомизации через props и CSS переменные
• 📱 Адаптивный дизайн
• 🔧 Простая интеграция с любым фреймворком
• 📝 Подробная документация

📦 Установка

npm install dpk-ui

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

React

import { defineCustomElements } from 'dpk-ui/loader';
defineCustomElements();

function App() {
  return (
    <modal-won
      win-amount="1000$"
      offer-link="https://example.com"
      button-text="Claim Your Prize!"
    />
  );
}

Vue

<template>
  <modal-won
    win-amount="1000$"
    offer-link="https://example.com"
    button-text="Claim Your Prize!"
  />
</template>

<script>
import { defineCustomElements } from 'dpk-ui/loader';
defineCustomElements();
</script>

Vanilla JS

<script type="module">
  import { defineCustomElements } from 'dpk-ui/loader';
  defineCustomElements();
</script>

<modal-won
  win-amount="1000$"
  offer-link="https://example.com"
  button-text="Claim Your Prize!"
></modal-won>

📚 Компоненты

Modal Won

Модальное окно для отображения выигрыша с анимацией и гибкими настройками стилизации.

Основные характеристики:

• 🎨 Настраиваемый дизайн через CSS переменные
• 🖼️ Поддержка фоновых изображений
• 📱 Адаптивный дизайн
• ⚡ Плавные анимации

Базовое использование:

<modal-won
  win-amount="1000$"
  title-text="YOU WON"
  button-text="CLAIM BONUS"
  offer-link="https://example.com"
></modal-won>

Основные параметры:

| Свойство | Тип | По умолчанию | Описание | |----------|-----|--------------|-----------| | isOpen | boolean | false | Состояние модального окна | | winAmount | string | '0' | Сумма выигрыша | | titleText | string | 'YOU WON' | Заголовок окна | | buttonText | string | 'CLAIM BONUS' | Текст кнопки | | offerLink | string | '#' | Ссылка для кнопки | | backgroundImage | string | undefined | Путь к фоновому изображению |

CSS кастомизация:

modal-won {
  --modal-content-bg: linear-gradient(to bottom, #4a1a09 0%, #2b0e04 100%);
  --modal-button-bg: linear-gradient(180deg, #26b33c 0%, #1a7928 100%);
  --modal-content-radius: 15px;
  --modal-button-radius: 8px;
}

Подробная документация доступна в GitHub репозитории

👨‍💻 Разработка

Команды

• npm start - Запуск в режиме разработки
• npm run build - Сборка проекта
• npm test - Запуск тестов
• npm run generate - Генерация нового компонента

📄 Лицензия

Распространяется под лицензией MIT