Platforma interfejsu użytkownika klasy enterprise

System projektowy TCM

Kompleksowy, dostępny, oparty na tokenach system projektowy dla produktów korporacyjnych, złożonych formularzy, złożonych przepływów pracy z multimediami i aplikacji przetwarzających duże ilości danych.

Poznaj tokeny Otwórz playground

15obszary specyfikacji

120+komponenty i wzorce

AAcel WCAG

Dostępne domyślnie

Sterowanie z priorytetem klawiatury, widoczny fokus, stany ARIA, regiony live, obsługa ograniczania animacji oraz tryby o wysokim kontraście.

Komponowalna architektura

Tokeny, komponenty, stan formularzy i zachowania są rozdzielone, dzięki czemu zespoły mogą integrować React, Vue, Angular lub Web Components.

Skala korporacyjna

Wzorce obejmują gęste tabele danych, adaptacyjne formularze, menedżery plików, podglądy multimediów oraz narzędzia deweloperskie.

Mapa pokrycia

Macierz implementacji specyfikacji

Podstawa

Tokeny projektowe i motywy

Wszystkie decyzje wizualne są oparte na zmiennych CSS, które można przełączać w czasie działania bez przeładowywania strony.

Przełącznik motywu w czasie działania

Wybierz systemowy, jasny, ciemny, niestandardową markę lub wysoki kontrast. Preferencje są zapisywane przy użyciu API pamięci Miniapps, gdy jest dostępne.

Kolor podstawowy Skala promienia Gęstość

Podgląd tokenów na żywo

Primary Secondary Healthy Warning

:root {
  --tcm-color-primary: ...;
  --tcm-radius-md: ...;
}

Kategorie tokenów

Kolory, typografia, odstępy, elewacja, krycie, gradienty, z-index, ruch i punkty graniczne.

Kontrolki

Podstawowe kontrolki wprowadzania

Walidowane, maskowane, multimedialne i edytorowe pola wprowadzania dla korporacyjnych kreatorów formularzy.

Standardowe pola, numeryczne i maskowane

Pole tekstowe Email Hasło Numer telefonu Waluta Procent Obszar tekstowy

Edytor bogatego tekstu, markdown i kodu

Bold List Code

<tcm-input required validation="email" />

Przesyłanie plików i obrazów

Upuść pliki tutajObrazy, PDF, audio, wideo do 50 MB

Selektor koloru

Użyj próbnika kolorów

Panel podpisu

WyczyśćZapisz podpis

Data, czas i lokalizacja

DateTimeDateTime

Zakres, krycie i suwaki

Size Opacity

Preview

Tagi, „chipsy” i wielokrotny wybór

Wzorce wyboru

Kontrolki wyboru

Sterowanie wyborem pojedynczym, wielokrotnym, hierarchicznym, geograficznym, wizualnym oraz w stylu kreatora.

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

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

Struktura

Nawigacja i struktura

Responsywny pasek boczny, górny pasek, szuflada, menu, okruszki nawigacyjne, paginacja, dolne arkusze i przyklejone obszary.

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.

Open bottom sheet

Architektura

Architektura formularzy

Reaktywne i dynamiczne formularze z grupami, tablicami, zagnieżdżonymi kontrolkami, zależnościami, asynchroniczną walidacją i adaptacyjnymi układami.

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

Interakcja

Przyciski i akcje

Standardowe akcje, wysyłanie/reset, przyciski ikonowe, hiperłącza, ładowanie, stan wyłączony, wciśnięte, grupy akcji oraz przycisk FAB typu speed dial.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

Status

Informacja zwrotna i wskaźniki

Paski postępu, spinnery, szkielety (skeleton), toast, snackbar, alerty, powiadomienia, odznaki, okna modalne, dymki (popover) i podpowiedzi (tooltip).

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

Dane korporacyjne

Prezentacja i kontrolki danych

Tabele, siatki, edycja w miejscu, sortowanie, filtrowanie, leniwe ładowanie, karty, listy, paginacja, karuzela, galeria oraz odtwarzacze multimediów.

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

Zasoby

Zaawansowane funkcje multimediów i plików

Menedżer plików, nawigacja po folderach, sortowanie metodą przeciągnij i upuść, podgląd obrazów/audio/wideo/PDF, kompresja i procesy konwersji.

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
Publish

Kompozycja

Układ i kontenery

Flex, siatka, panele zwijane, karuzele, responsywne kolumny, automatyczne układy, elementy przyklejone i kontrola przepełnienia.

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.

Ustawienia

Narzędzia i ustawienia

Geolokalizacja, mapy, skanery QR/kodów kreskowych, widżety pogodowe, przełączniki motywów, kontrolki czcionki/tła/obramowania/cienia oraz adaptacyjne tryby kolorów.

Geolocation and weather

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

Model wykonania

Formularze — zdarzenia i zarządzanie stanem

Haki cyklu życia, zdarzenia walidacji, zależności, asynchroniczne wiązanie danych, cofanie/ponawianie, autozapis, odzyskiwanie, śledzenie stanu i animacje.

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

Dostępność i użyteczność

Praktyki WCAG 2.1 AA dotyczące obsługi klawiaturą, czytników ekranu, kontrastu, wskaźników fokusu, ograniczania animacji oraz użyteczności na różnych urządzeniach.

Checklist

Live region

Announce status

Contrast AA7.8:1

Adaptacyjne

Responsywny i adaptacyjny design

Układy mobile-first, adaptacyjne progi (breakpoints), cele dotykowe, przewijane (swipe) karty, nakładki przyjazne dla klawiatury oraz responsywna gęstość.

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

Doświadczenie deweloperskie

Obsługa TypeScript, integracje z frameworkami, playgroundy Storybook, eksport tokenów, API motywów, modularne importy, generowanie szablonów w CLI oraz konwencje nazewnictwa.

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