Библиотека современных UI компонентов на чистом HTML, CSS и JavaScript. Без зависимостей, легкая и производительная. Сгенерирована с применением нейросетей.
- 🎯 100% чистый код - HTML, CSS, JavaScript без фреймворков
- 📦 60+ компонентов - все необходимые элементы интерфейса
- 🎨 Темная тема - встроенная поддержка тем
- 📱 Адаптивность - работает на всех устройствах
- ⚡ Производительность - минимальный размер, никаких зависимостей
- 🔧 Гибкость - каждый компонент можно использовать отдельно
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://raw.githubusercontent.com/ll1ness/TechOne-UI/refs/heads/com.techone.build/techon-ui.min.js">
</head>
<!-- остальной код --><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://raw.githubusercontent.com/ll1ness/TechOne-UI/refs/heads/com.techone.build/techon-ui.min.js">
</head>
<body>
<!-- Кнопка -->
<button class="to-button" data-variant="primary">Нажми меня</button>
<!-- Аккордеон -->
<div class="to-accordion" data-open="true">
<div class="to-accordion-header">
<button class="to-accordion-trigger">
<span>Заголовок</span>
<span class="to-accordion-icon">▼</span>
</button>
</div>
<div class="to-accordion-content">
<div class="to-accordion-content-inner">
Содержимое аккордеона
</div>
</div>
</div>
<!-- Бейдж -->
<span class="to-badge" data-variant="success">Успех</span>
<script src="https://raw.githubusercontent.com/ll1ness/TechOne-UI/refs/heads/com.techone.build/techon-ui.min.js"></script>
</body>
</html>// Просто подключите скрипт - он сам найдет и инициализирует компоненты
// Технология MutationObserver автоматически обработает динамически // Загрузить конкретный компонент
TechOnUI.load('button').then(() => {
console.log('Кнопки загружены');
});
// Загрузить все компоненты
TechOnUI.loadAll();
// Просканировать и загрузить только нужные
TechOnUI.scan();// Если файлы компонентов лежат в другой папке
TechOnUI.setBasePath('/assets/techon/');
// Включить отладку
TechOnUI.enableDebug();<body data-theme="light">
<!-- компоненты будут в светлой теме -->
</body><body data-theme="dark">
<!-- компоненты будут в тёмной теме -->
</body>// Программно
document.body.setAttribute('data-theme', 'dark');
// Использовать компонент ThemeSwitcher
<div class="to-theme-switcher" data-type="buttons"></div>
// или
<div class="to-theme-switcher" data-type="dropdown"></div>// Доступ через TechOnUI или to
TechOnUI.load('button');
to.load('button');
// Версия
console.log(TechOnUI.version); // "1.01.2"| Метод | Описание | Пример |
|---|---|---|
load(componentName) |
Загрузить компонент | TechOnUI.load('accordion') |
loadAll() |
Загрузить все компоненты | TechOnUI.loadAll() |
scan() |
Найти и загрузить используемые компоненты | TechOnUI.scan() |
setBasePath(path) |
Установить базовый путь для файлов | TechOnUI.setBasePath('/ui/') |
enableDebug() |
Включить режим отладки | TechOnUI.enableDebug() |
// Слушать загрузку компонента
document.addEventListener('DOMContentLoaded', () => {
console.log('TechOn UI готов');
});
// Кастомные события компонентов
document.querySelector('.to-dropdown').addEventListener('dropdown-select', (e) => {
console.log('Выбрано:', e.detail.value);
});<div data-theme="dark" style="padding: 40px;">
<div class="to-card" style="max-width: 400px; margin: 0 auto;">
<div class="to-card-header">
<h2 class="to-card-title">Вход</h2>
</div>
<div class="to-card-content">
<input type="email" placeholder="Email" style="width: 100%; padding: 10px; margin-bottom: 16px; border: 1px solid var(--to-border); border-radius: var(--to-radius);">
<input type="password" placeholder="Пароль" style="width: 100%; padding: 10px; margin-bottom: 24px; border: 1px solid var(--to-border); border-radius: var(--to-radius);">
<button class="to-button" data-variant="primary" data-fill-width="true">Войти</button>
</div>
</div>
</div><div class="to-grid" data-columns="3" data-gap="m">
<div class="to-card" data-variant="elevated">
<div class="to-card-header">
<h3 class="to-card-title">Пользователи</h3>
<span class="to-badge" data-variant="info">+12%</span>
</div>
<div class="to-card-content">
<div style="font-size: 32px; font-weight: bold;">1,234</div>
</div>
</div>
<div class="to-card" data-variant="elevated">
<div class="to-card-header">
<h3 class="to-card-title">Заказы</h3>
<span class="to-badge" data-variant="success">+5%</span>
</div>
<div class="to-card-content">
<div style="font-size: 32px; font-weight: bold;">567</div>
</div>
</div>
<div class="to-card" data-variant="elevated">
<div class="to-card-header">
<h3 class="to-card-title">Доход</h3>
<span class="to-badge" data-variant="warning">-2%</span>
</div>
<div class="to-card-content">
<div style="font-size: 32px; font-weight: bold;">$12.3K</div>
</div>
</div>
</div># Клонировать репозиторий
git clone https://github.com/techon-ui/techon-ui.git
# Установить зависимости (для сборки)
npm install
# Собрать проект
npm run build
# Запустить dev сервер
npm run devМы приветствуем любой вклад в проект!
Форкните репозиторий
Создайте ветку для фичи (git checkout -b feature/amazing-feature)
Закоммитьте изменения (git commit -m 'Add amazing feature')
Запушьте в ветку (git push origin feature/amazing-feature)
Откройте Pull Request
👥 Contributors
Благодарим всех, кто сделал вклад в проект:
DeepSeek - deepseek.com - Архитектура компонентов, оптимизация кода
ll1ness - github.com/ll1ness - Дизайн система, темизация
Lorant One - lorant.one - Документация, примеры использования
📄 Лицензия
MIT © TechOn UI. Полный текст лицензии доступен в файле LICENSE. 🌟 Поддержка
Поставьте звезду на GitHub ⭐
Расскажите о проекте друзьям
Используйте в своих проектах
Создавайте issue с багами и идеями
📞 Контакты
GitHub: github.com/ll1ness
Email: majezxctoy6799@outlook.com
- ll1ness