System projektowy TCM

System projektowy TCM

v1
by
V
Vijayraghavan
System projektowy TCM
Loading...
TCM Design System
AD
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.

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.

Podgląd tokenów na żywo

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

Edytor bogatego tekstu, markdown i kodu

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

Przesyłanie plików i obrazów

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

Selektor koloru

Panel podpisu

Data, czas i lokalizacja

Zakres, krycie i suwaki

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

Selectors

Icon, font, shape, pattern

Tree view

    • Colors
    • Typography
    • Motion
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

Advanced options

Expandable panels support keyboard access and nested content.

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

Smart wizard

  1. Profile
  2. Rules
  3. Review

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.

Developer API
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.

Progress and loading

Dane korporacyjne

Prezentacja i kontrolki danych

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

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

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

    1. Validate
    2. Compress
    3. Convert
    4. 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

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    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

    Undo, redo, auto-save

    Idle
    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

    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

    DX

    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