TCM Tasarım Sistemi

TCM Tasarım Sistemi

v1
by
V
Vijayraghavan
TCM Tasarım Sistemi
Loading...
TCM Tasarım Sistemi
AD
Kurumsal UI platformu

TCM Tasarım Sistemi

Kurumsal ürünler, karmaşık formlar, zengin medya iş akışları ve veri yoğun uygulamalar için kapsamlı, erişilebilir, jeton odaklı bir tasarım sistemi.

15şartname alanları
120+bileşenler ve kalıplar
AAWCAG hedefi

Varsayılan olarak erişilebilir

Klavye öncelikli kontroller, görünür odak, ARIA durumları, canlı bölgeler, azaltılmış hareket desteği ve yüksek karşıtlık modları.

Birleştirilebilir mimari

Jetonlar, bileşenler, form durumu ve davranışlar ayrılmıştır; böylece ekipler React, Vue, Angular veya Web Bileşenlerini entegre edebilir.

Kurumsal ölçek

Kalıplar yoğun veri tablolarını, uyarlanabilir formları, dosya yöneticilerini, medya önizlemelerini ve geliştirici araçlarını kapsar.

Kapsam haritası

Şartname uygulama matrisi

Temel

Tasarım Tokenları & Tema Yönetimi

Tüm görsel kararlar, sayfayı yeniden yüklemeden çalışma zamanında değiştirilebilen CSS değişkenleri tarafından belirlenir.

Çalışma zamanı tema değiştirici

Sistem, açık, koyu, özel marka veya yüksek kontrast arasından seçim yapın. Tercihler, mümkün olduğunda Miniapps depolama API’si ile kalıcı hale getirilir.

Canlı token önizlemesi

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

Token kategorileri

Renkler, yazı tipi, boşluklandırma, yükselti, opaklık, geçişler, z-index, hareket ve kırılma noktaları.

Kontroller

Temel Girdi Kontrolleri

Kurumsal form oluşturucular için doğrulanmış, maskelenmiş, medya destekli ve düzenleyici tarzı girdiler.

Standart, sayısal ve maskeli alanlar

Biçimlendirilmiş metin, markdown ve kod düzenleyici

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

Dosya ve görsel yükleme

Dosyaları buraya bırakınGörüntüler, PDF, ses, video (50MB’a kadar)

Renk seçici

İmza alanı

Tarih, saat ve yerelleştirme

Aralık, opaklık ve kaydırıcılar

Preview

Etiketler, fişler ve çoklu seçim

Seçim kalıpları

Seçim Kontrolleri

Tekli, çoklu, hiyerarşik, coğrafi, görsel ve sihirbaz tarzı seçim kontrolleri.

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.

Mimari

Form Mimarisi

Gruplar, diziler, iç içe kontroller, bağımlılıklar, eşzamansız doğrulama ve uyarlanabilir düzenlerle reaktif ve dinamik formlar.

Dynamic form builder

Smart wizard

  1. Profile
  2. Rules
  3. Review

Validation and state model

Etkileşim

Düğmeler ve Eylemler

Standart işlemler, gönder/sıfırla, simge düğmeleri, köprüler, yükleme, devre dışı, basılı, eylem grupları ve Hızlı Eylem Düğmesi (FAB) hız menüsü.

Developer API
Durum

Geri Bildirim ve Göstergeler

İlerleme, döndürücüler, iskeletler, tost, snackbar, uyarılar, bildirimler, rozetler, modallar, açılır pencereler ve ipuçları.

Alerts and notifications

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

Progress and loading

Kurumsal veriler

Görüntüleme ve Veri Denetimleri

Tablolar, ızgaralar, satır içi düzenleme, sıralama, filtreleme, tembel yükleme, kartlar, listeler, sayfalama, döngü (carousel), galeri ve medya oynatıcılar.

ServiceStatusRegionLatencyActions

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

Media player

Varlıklar

Gelişmiş Medya ve Dosya Özellikleri

Dosya yöneticisi, klasör gezintisi, sürükle-bırak sıralama, görsel/ses/video/PDF önizleyiciler, sıkıştırma ve dönüştürme iş akışları.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Bileşim

    Yerleşim ve Kaplar

    Esnek düzen, ızgara, daraltılabilir paneller, karuseller, duyarlı sütunlar, otomatik düzenler, yapışkan öğeler ve taşma kontrolleri.

    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.
    Ayarlar

    Araçlar & Ayarlar

    Coğrafi konum, haritalar, QR/çubuk kod tarayıcıları, hava durumu bileşenleri, tema değiştiriciler, yazı tipi/arka plan/kenarlık/gölge kontrolleri ve uyarlanabilir renk kipleri.

    Geolocation and weather

    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    Çalışma zamanı modeli

    Formlar — Olay ve Durum Yönetimi

    Yaşam döngüsü kancaları, doğrulama olayları, bağımlılıklar, eşzamansız veri bağlama, geri al/yeniden yap, otomatik kaydetme, kurtarma, durum izleme ve animasyonlar.

    Event timeline

    Undo, redo, auto-save

    Idle
    Erişilebilirlik

    Erişilebilirlik ve Kullanılabilirlik

    Klavye, ekran okuyucular, kontrast, odak göstergeleri, azaltılmış hareket ve çapraz cihaz kullanılabilirliği için WCAG 2.1 AA uygulamaları.

    Checklist

    Live region

    Contrast AA7.8:1
    Uyarlanabilir

    Duyarlı ve Uyarlanabilir Tasarım

    Mobil öncelikli yerleşimler, uyarlanabilir kırılma noktaları, dokunma hedefleri, kaydırılabilir sekmeler, klavye dostu katmanlar ve duyarlı yoğunluk.

    Breakpoint tokens

    Touch-friendly components

    Geliştirici Deneyimi

    Geliştirici Deneyimi

    TypeScript desteği, framework entegrasyonları, Storybook oyun alanları, jeton dışa aktarma, tema API’leri, modüler içe aktarımlar, CLI iskelet oluşturma ve adlandırma kuralları.

    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