نظام تصميم TCM

نظام تصميم TCM

v1
by
V
Vijayraghavan
نظام تصميم TCM
Loading...
نظام تصميم TCM
AD
منصّة واجهات استخدام للمؤسسات

نظام تصميم TCM

نظام تصميم شامل، قابل للوصول، مدفوع بالرموز لمنتجات المؤسسات، النماذج المعقّدة، سير عمل الوسائط الغنية، والتطبيقات كثيفة البيانات.

15مجالات المواصفات
120+مكوّنات وأنماط
AAهدف WCAG

يمكن الوصول إليه افتراضيًا

عناصر تحكم موجهة بلوحة المفاتيح أولًا، تركيز مرئي، حالات ARIA، مناطق حيّة، دعم تقليل الحركة، وأوضاع تباين عالٍ.

هندسة تركيبية

الرموز، والمكونات، وحالة النماذج، والسلوكيات مفصولة بحيث يمكن للفرق دمج React أو Vue أو Angular أو مكوّنات الويب.

على مستوى المؤسسات

الأنماط تغطي شبكات بيانات كثيفة، ونماذج تكيفية، ومديري ملفات، ومعاينة وسائط، وأدوات مطوّرين.

خريطة التغطية

مصفوفة تنفيذ المواصفات

الأساس

رموز التصميم والتنسيق

جميع القرارات البصرية مدفوعة بمتغيرات CSS يمكن تبديلها في وقت التشغيل دون إعادة تحميل الصفحة.

مبدّل السمة في وقت التشغيل

اختر النظام أو الفاتح أو الداكن أو العلامة التجارية المخصصة أو التباين العالي. تُحفَظ التفضيلات باستخدام واجهة برمجة تطبيقات تخزين Miniapps عند توفرها.

معاينة مباشرة للرموز

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

فئات الرموز

الألوان، والمحارف، والتباعد، والارتفاع، والشفافية، والتدرجات، ومستوى الظهور (z-index)، والحركة، ونقاط التوقف.

عناصر التحكم

عناصر تحكم الإدخال الأساسية

حقول إدخال مُتحقَّقة، ومقنَّعة، وداعمة للوسائط، وبنمط المحرر لمنشئي النماذج المؤسسية.

حقول عادية ورقمية وذات قناع

نص منسّق، وMarkdown، ومحرر شيفرة

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

تحميل الملفات والصور

أسقط الملفات هناصور، PDF، صوت، فيديو حتى 50 ميجابايت

أداة اختيار الألوان

لوحة التوقيع

التاريخ، الوقت، والتهيئة المحلية

نطاق، عتامة، ومنزلقات

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
الحالة

التغذية الراجعة والمؤشرات

تقدّم، مؤشرات دوران، هياكل عظمية، توست، سنackbar، تنبيهات، إشعارات، شارات، نوافذ منبثقة (مودال)، نوافذ منثورة، وتلميحات أدوات.

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
    التكوين

    التخطيطات والحاويات

    Flex، الشبكة، الألواح القابلة للطي، المعارض الدوّارة، الأعمدة المتجاوبة، التخطيطات التلقائية، العناصر المُثبتة، وعناصر التحكم في التجاوز.

    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
    إتاحة

    إمكانية الوصول وقابلية الاستخدام

    ممارسات WCAG 2.1 AA الخاصة بلوحة المفاتيح، وقارئات الشاشة، والتباين، ومؤشرات التركيز، وتقليل الحركة، وقابلية الاستخدام عبر الأجهزة.

    Checklist

    Live region

    Contrast AA7.8:1
    تكيفي

    تصميم متجاوب وتكيفي

    تخطيطات موجهة للجوال أولًا، نقاط توقّف تكيفية، أهداف لمس، ألسنة يمكن التمرير بينها، طبقات تراكبية ملائمة بلوحة المفاتيح، وكثافة متجاوبة.

    Breakpoint tokens

    Touch-friendly components

    تجربة المطوّر

    تجربة المطوّر

    دعم TypeScript، تكاملات الأطر، بيئات لعب Storybook، تصدير التوكينات، واجهات برمجة تطبيقات التخصيص (الثيمات)، الاستيراد المعياري، توليد الهياكل عبر سطر الأوامر (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