TCM डिज़ाइन सिस्टम

TCM डिज़ाइन सिस्टम

v1
by
V
Vijayraghavan
TCM डिज़ाइन सिस्टम
Loading...
TCM डिज़ाइन सिस्टम
AD
एंटरप्राइज़ UI प्लेटफ़ॉर्म

TCM डिज़ाइन सिस्टम

एंटरप्राइज़ प्रोडक्ट्स, जटिल फॉर्म्स, रिच मीडिया वर्कफ़्लोज़ और डेटा‑हेवी एप्लिकेशंस के लिए एक व्यापक, एक्सेसिबल, टोकन‑ड्रिवन डिज़ाइन सिस्टम।

15स्पेस एरियाज़
120+कॉम्पोनेंट्स और पैटर्न्स
AAWCAG लक्ष्य

डिफॉल्ट रूप से एक्सेसिबल

कीबोर्ड‑प्राथमिक नियंत्रण, दृश्य फोकस, ARIA स्टेट्स, लाइव रीजन, रिड्यूस्ड‑मोशन सपोर्ट और हाई‑कॉन्ट्रास्ट मोड्स।

कंपोज़ेबल आर्किटेक्चर

टोकन्स, कॉम्पोनेंट्स, फॉर्म स्टेट और बिहेवियर अलग‑अलग हैं, ताकि टीमें React, Vue, Angular या Web Components को इंटीग्रेट कर सकें।

एंटरप्राइज़ स्तर पर स्केल

पैटर्न घने डेटा ग्रिड्स, अनुकूलनीय फॉर्म्स, फ़ाइल मैनेजर्स, मीडिया प्रीव्यू और डेवलपर टूलिंग को कवर करते हैं।

कवरेज मैप

स्पेसिफिकेशन इम्प्लिमेंटेशन मैट्रिक्स

फ़ाउंडेशन

डिज़ाइन टोकन और थीमिंग

सभी दृश्य निर्णय CSS वेरिएबल्स द्वारा संचालित होते हैं जिन्हें पेज रीलोड किए बिना रनटाइम पर बदला जा सकता है।

रनटाइम थीम स्विचर

सिस्टम, लाइट, डार्क, कस्टम ब्रांड, या उच्च कॉन्ट्रास्ट चुनें। जब उपलब्ध हो, तो प्राथमिकताएँ Miniapps स्टोरेज API के साथ सुरक्षित की जाती हैं।

लाइव टोकन पूर्वावलोकन

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

टोकन श्रेणियाँ

रंग, टाइप, स्पेसिंग, उन्नयन, अपारदर्शिता, ग्रेडिएंट, z-index, मोशन, और ब्रेकपॉइंट्स।

नियंत्रण

मुख्य इनपुट नियंत्रण

एंटरप्राइज़ फ़ॉर्म बिल्डर के लिए मान्य, मास्क किए गए, मीडिया‑समर्थ और एडिटर‑शैली इनपुट।

मानक, संख्यात्मक और मास्क किए गए फ़ील्ड

रिच टेक्स्ट, मार्कडाउन और कोड एडिटर

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

फ़ाइल और छवि अपलोड

फ़ाइलें यहाँ छोड़ेंइमेज, PDF, ऑडियो, वीडियो 50MB तक

कलर पिकर

हस्ताक्षर पैड

तारीख, समय और स्थानीयकरण

रेंज, अपारदर्शिता और स्लाइडर

Preview

टैग, चिप्स, और मल्टी-सेलेक्ट

चॉइस पैटर्न्स

चयन नियंत्रण

सिंगल, मल्टीपल, हायार्किकल, भौगोलिक, विजुअल और विज़ार्ड‑स्टाइल चयन नियंत्रण।

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.

आर्किटेक्चर

फ़ॉर्म आर्किटेक्चर

समूह, ऐरे, नेस्टेड कंट्रोल, निर्भरताएँ, असिंक्रोन मान्यकरण और अनुकूली लेआउट के साथ रिएक्टिव और डायनेमिक फ़ॉर्म।

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

इंटरैक्शन

बटन और क्रियाएँ

मानक क्रियाएँ, सबमिट/रीसेट, आइकन बटन, हाइपरलिंक, लोडिंग, निष्क्रिय, दबाए गए, एक्शन समूह और FAB स्पीड डायल।

Developer API
स्थिति

फ़ीडबैक और इंडिकेटर

प्रोग्रेस, स्पिनर, स्केलेटन, टोस्ट, स्नैकबार, अलर्ट, नोटिफ़िकेशन, बैज, मोडल, पॉपओवर और टूलटिप।

Alerts and notifications

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

Progress and loading

एंटरप्राइज़ डेटा

डिस्प्ले और डेटा नियंत्रण

टेबल, ग्रिड, इनलाइन संपादन, सॉर्टिंग, फ़िल्टरिंग, लेज़ी लोडिंग, कार्ड, सूची, पेजिनेशन, कैरोसेल, गैलरी और मीडिया प्लेयर।

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

संसाधन

उन्नत मीडिया और फ़ाइल सुविधाएँ

फ़ाइल मैनेजर, फ़ोल्डर नेविगेशन, ड्रैग-एंड-ड्रॉप क्रम, छवि/ऑडियो/वीडियो/PDF प्रीव्यूअर, संपीड़न, और कन्वर्ज़न वर्कफ़्लो।

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    संरचना

    लेआउट और कंटेनर

    फ्लेक्स, ग्रिड, संकुचित पैनल, कैरोसेल, रेस्पॉन्सिव कॉलम, ऑटो-लेआउट, स्टिकी एलिमेंट और ओवरफ़्लो नियंत्रण।

    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

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    रनटाइम मॉडल

    फॉर्म्स — इवेंट्स और स्टेट मैनेजमेंट

    लाइफ़साइकल हुक्स, वेलिडेशन इवेंट्स, डिपेंडेंसीज़, असिन्क डेटा बाइंडिंग, अनडू/रीडू, ऑटो‑सेव, रिकवरी, स्टेट ट्रैकिंग और ऐनिमेशन।

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

    सुगम्यता और उपयोगिता

    कीबोर्ड, स्क्रीन रीडर, कंट्रास्ट, फ़ोकस इंडिकेटर, कम गति और क्रॉस‑डिवाइस उपयोगिता के लिए WCAG 2.1 AA प्रथाएँ।

    Checklist

    Live region

    Contrast AA7.8:1
    अनुकूलनीय

    रेस्पॉन्सिव और अनुकूलनीय डिज़ाइन

    मोबाइल‑प्रथम लेआउट्स, अनुकूलनीय ब्रेकपॉइंट्स, टच टार्गेट्स, स्वाइपेबल टैब्स, कीबोर्ड‑अनुकूल ओवरलेज़ और रेस्पॉन्सिव डेंसिटी।

    Breakpoint tokens

    Touch-friendly components

    DX

    डेवलपर अनुभव

    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