⚡ TechOne UI v1.01.2

Матричная версия • Все 60+ модулей • Монохром с цветными акцентами

🔘 Кнопки Buttons

Варианты

<button class="to-button" data-variant="primary">Primary</button>

Размеры

<button class="to-button" data-size="s">Small</button>

Состояния

<button class="to-button" disabled>Disabled</button>

🏷️ Бейджи Badges

Монохромные

Neutral
<span class="to-badge" data-variant="neutral">Neutral</span>

Цветные (акценты)

Success Warning Danger Info
<span class="to-badge" data-variant="success">Success</span>

⏳ Спиннеры Spinners

Размеры

<span class="to-spinner" data-size="m"></span>

Цветные

<span class="to-spinner" data-color="success"></span>

👤 Аватары Avatars

Размеры

JD
AB
CD
EF
GH
<div class="to-avatar" data-size="m" data-value="JD">JD</div>

Группа

A
B
C
D
Группа аватаров

🏷️ Теги Tags

Монохромные

Default Primary
<span class="to-tag">Default</span>

Цветные

Success Warning Danger
<span class="to-tag" data-variant="success">Success</span>

📦 Карточки Cards

Обычная

Заголовок

Содержимое карточки

<div class="to-card">...</div>

С тенью

Elevated

Карточка с тенью

<div class="to-card" data-variant="elevated">...</div>

📑 Аккордеон Accordion

Обычный

Скрытое содержимое аккордеона с матричной анимацией.
<div class="to-accordion">...</div>

Группа

Содержимое 1
Содержимое 2
Группа аккордеонов

💬 Тултип Tooltip

Подсказка

Это тултип
<div class="to-tooltip">...</div>

Разные позиции

Сверху
Снизу
data-position="top/bottom"

📊 Прогресс Progress

Индикаторы

Прогресс 25%
Прогресс 50%
Прогресс 75%
<div class="to-progress" data-value="50">...</div>

📢 Баннеры Banners

Монохромный

Обычный баннер
<div class="to-banner">...</div>

Цветные

Успешный баннер
Предупреждение
Ошибка
data-variant="success/warning/danger"

📊 Таблицы Tables

Простая таблица

Имя Возраст Город
Иван25Москва
Мария30СПб
Петр28Казань
<table class="to-table">...</table>

⏱️ Таймлайн Timeline

События

Событие 1 - завершено
Событие 2 - активно
Событие 3 - ошибка
Событие 4 - ожидание
<div class="to-timeline">...</div>

⚡ Статусы Status Indicators

Индикаторы

Online Away Busy
<span class="to-status-indicator" data-color="success">Online</span>

🦴 Скелетон Skeleton

Загрузка

<div class="to-skeleton"></div>

🔲 Flex & Grid

Flex

1
2
3
<div class="to-flex" data-gap="m">...</div>

Grid

1
2
3
<div class="to-grid" data-columns="3">...</div>

✨ Иконки Icons

Примеры

❤️ 🔥 🎯
<span class="to-icon">❤️</span>

Кнопки-иконки

<button class="to-icon-button">❤️</button>

💓 Пульсация Pulse

Индикаторы

<div class="to-pulse" data-color="primary"></div>

⬆️ Наверх Scroll Top

Демо

<button class="to-scroll-top">↑</button>
Появится после прокрутки

💬 Диалоги Dialogs

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

Диалоговое окно (демо)

🔄 Переключатели Toggles

Toggle Buttons

<button class="to-toggle-button" data-selected="true">Вкл</button>

Segmented Control

Группа переключателей