Система дизайна TCM

Система дизайна TCM

v1
by
V
Vijayraghavan
Система дизайна TCM
Loading...
Перейти к содержимому
AD
Платформа интерфейса для предприятий

Система дизайна TCM

Комплексная, доступная, управляемая токенами дизайн‑система для корпоративных продуктов, сложных форм, рабочих процессов с богатыми медиа и приложений с большим объёмом данных.

Изучить токены Открыть песочницу
15области спецификаций
120+компоненты и паттерны
AAцель WCAG

Доступно по умолчанию

Управление с клавиатуры, видимая фокусировка, состояния ARIA, живые области, поддержка уменьшенного движения и режимы высокого контраста.

Компонентная архитектура

Токены, компоненты, состояние форм и поведения разделены, поэтому команды могут интегрировать React, Vue, Angular или веб-компоненты.

Масштаб для предприятий

Паттерны охватывают плотные таблицы данных, адаптивные формы, файловые менеджеры, предпросмотр мультимедиа и инструменты для разработчиков.

Карта покрытия

Матрица реализации спецификаций

Основы

Дизайн‑токены и темизация

Все визуальные решения управляются CSS‑переменными, которые можно переключать во время выполнения без перезагрузки страницы.

Переключатель темы во время выполнения

Выберите системную, светлую, тёмную, пользовательский бренд или высокую контрастность. Настройки сохраняются через Miniapps storage API, когда он доступен.

Основной цвет Шкала скругления Плотность

Живой предпросмотр токенов

Primary Secondary Healthy Warning
:root { --tcm-color-primary: ...; --tcm-radius-md: ...; }

Категории токенов

Цвета, шрифты, расстояния, подъём (elevation), непрозрачность, градиенты, z-index, анимация и брейкпоинты.

Элементы управления

Базовые элементы ввода

Проверяемые, маскируемые, поддерживающие медиа и редактороподобные поля ввода для корпоративных конструкторов форм.

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

Текстовое поле Email Пароль Номер телефона Валюта Процент Текстовая область

Редактор форматированного текста, Markdown и кода

Bold List Code 
<tcm-input required validation="email" />

Загрузка файлов и изображений

Перетащите файлы сюдаИзображения, PDF, аудио, видео до 50 МБ

Выбор цвета

Использовать пипетку

Панель подписи

ОчиститьСохранить подпись

Дата, время и локализация

DateTimeDateTime

Диапазон, непрозрачность и ползунки

Size Opacity
Preview

Теги, чипсы и множественный выбор

Паттерны выбора

Элементы управления выбором

Элементы выбора с одним, множественным, иерархическим, географическим, визуальным и пошаговым (мастер) выбором.

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

  • ▾ Design Tokens
    • Colors
    • Typography
    • Motion
  • ▾ Components
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

UsageAPIA11Y
Advanced options

Expandable panels support keyboard access and nested content.

Структура

Навигация и структура

Адаптивная боковая панель, верхняя панель, выдвижная панель, меню, хлебные крошки, пагинация, нижние листы и закреплённые области.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu
RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Sticky action footer
Open bottom sheet
Архитектура

Архитектура форм

Реактивные и динамические формы с группами, массивами, вложенными контролами, зависимостями, асинхронной валидацией и адаптивными макетами.

Dynamic form builder

Add fieldValidate

Smart wizard

  1. Profile
  2. Rules
  3. Review
BackNext

Validation and state model

Взаимодействие

Кнопки и действия

Стандартные действия, отправка/сброс, кнопки-значки, гиперссылки, загрузка, отключённые и нажатые состояния, группы действий и кнопка быстрого набора (FAB).

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API
ResetPreviewPublish
New docUploadGenerate
Статус

Обратная связь и индикаторы

Индикаторы выполнения, спиннеры, скелетоны, тосты, снэкбары, предупреждения, уведомления, бейджи, модальные окна, поповеры и тултипы.

Alerts and notifications

Scheduled maintenance Sunday 02:00 UTC.
Storage quota is above 95%.
Database connection failed. Retrying.
Trigger toast

Progress and loading

Open accessible modal
Корпоративные данные

Отображение и элементы управления данными

Таблицы, таблицы‑сетки, встроенное редактирование, сортировка, фильтрация, ленивые загрузки, карточки, списки, пагинация, карусель, галерея и медиаплееры.

Export CSV
ServiceStatusRegionLatencyActions
Previous12Next

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

‹
Analytics dashboard
›

Media player

Ресурсы

Расширенные функции работы с медиа и файлами

Файловый менеджер, навигация по папкам, сортировка перетаскиванием, просмотр изображений/аудио/видео/PDF, сжатие и конвертация файлов.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Композиция

    Макеты и контейнеры

    Flex, grid, складывающиеся панели, карусели, адаптивные колонки, автокомпоновка, фиксированные элементы и управление переполнением.

    Responsive auto-layout playground

    Flex area
    Grid area
    Sticky area
    Overflow area
    Collapsible panel

    Panels use semantic disclosure patterns and retain keyboard accessibility.

    Overflow controls

    Wide content inside a contained scroll region with clear affordances.
    Настройки

    Утилиты и настройки

    Геолокация, карты, сканеры QR/штрих‑кодов, виджеты погоды, переключатели тем, управление шрифтами/фоном/границами/тенями и адаптивные цветовые режимы.

    Geolocation and weather

    Get location
    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    FontShadow
    Модель выполнения

    Формы — события и управление состоянием

    Хуки жизненного цикла, события валидации, зависимости, асинхронное привязка данных, отмена/повтор, авто‑сохранение, восстановление, отслеживание состояния и анимации.

    Event timeline

    Simulate lifecycle

    Undo, redo, auto-save

    UndoRedoIdle
    Доступность

    Доступность и удобство использования

    Практики WCAG 2.1 AA для клавиатуры, экранных дикторов, контраста, индикаторов фокуса, уменьшенного движения и межустройственной удобства.

    Checklist

    Live region

    Announce status
    Contrast AA7.8:1
    Адаптивность

    Адаптивный и отзывчивый дизайн

    Мобильные в первую очередь макеты, адаптивные брейкпоинты, целевые области для касаний, прокручиваемые свайпом вкладки, удобные для клавиатуры оверлеи и адаптивная плотность.

    Breakpoint tokens

    Touch-friendly components

    44px targetSwipe tabBottom sheet
    Опыт разработчика

    Опыт разработчика

    Поддержка TypeScript, интеграции с фреймворками, песочницы Storybook, экспорт токенов, API для темизации, модульные импорты, генерация через CLI и соглашения об именовании.

    TypeScript component API

    import { Button, ThemeProvider } from '@tcm/design-system';

<ThemeProvider mode="system" tokens={customTokens}>
  <Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>

    CLI and token export

    npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook start

    Accessible enterprise modal

    Focus is managed, Escape closes the dialog, and actions are keyboard reachable.

    This action cannot be undone.
    CancelAcknowledge

    Enterprise bottom sheet

    Mobile-friendly surfaces can be dismissed with a button or backdrop tap.

    Done