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ı.
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.
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ı.
Jetonlar, bileşenler, form durumu ve davranışlar ayrılmıştır; böylece ekipler React, Vue, Angular veya Web Bileşenlerini entegre edebilir.
Kalıplar yoğun veri tablolarını, uyarlanabilir formları, dosya yöneticilerini, medya önizlemelerini ve geliştirici araçlarını kapsar.
Tüm görsel kararlar, sayfayı yeniden yüklemeden çalışma zamanında değiştirilebilen CSS değişkenleri tarafından belirlenir.
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.
:root {
--tcm-color-primary: ...;
--tcm-radius-md: ...;
}
Renkler, yazı tipi, boşluklandırma, yükselti, opaklık, geçişler, z-index, hareket ve kırılma noktaları.
Kurumsal form oluşturucular için doğrulanmış, maskelenmiş, medya destekli ve düzenleyici tarzı girdiler.
<tcm-input required validation="email" />
Tekli, çoklu, hiyerarşik, coğrafi, görsel ve sihirbaz tarzı seçim kontrolleri.
Expandable panels support keyboard access and nested content.
Gruplar, diziler, iç içe kontroller, bağımlılıklar, eşzamansız doğrulama ve uyarlanabilir düzenlerle reaktif ve dinamik formlar.
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ü.
İlerleme, döndürücüler, iskeletler, tost, snackbar, uyarılar, bildirimler, rozetler, modallar, açılır pencereler ve ipuçları.
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.
| Service | Status | Region | Latency | Actions |
|---|
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ı.
Esnek düzen, ızgara, daraltılabilir paneller, karuseller, duyarlı sütunlar, otomatik düzenler, yapışkan öğeler ve taşma kontrolleri.
Panels use semantic disclosure patterns and retain keyboard accessibility.
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.
Scanner-ready surface for camera integrations.
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.
Klavye, ekran okuyucular, kontrast, odak göstergeleri, azaltılmış hareket ve çapraz cihaz kullanılabilirliği için WCAG 2.1 AA uygulamaları.
Mobil öncelikli yerleşimler, uyarlanabilir kırılma noktaları, dokunma hedefleri, kaydırılabilir sekmeler, klavye dostu katmanlar ve duyarlı yoğunluk.
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ı.
import { Button, ThemeProvider } from '@tcm/design-system';
<ThemeProvider mode="system" tokens={customTokens}>
<Button variant="primary" loading={saving}>Save</Button>
</ThemeProvider>npx tcm-ui generate component data-grid
npx tcm-ui tokens export --format figma
npx tcm-ui storybook startFocus is managed, Escape closes the dialog, and actions are keyboard reachable.
Mobile-friendly surfaces can be dismissed with a button or backdrop tap.