Hệ thống thiết kế TCM

Hệ thống thiết kế TCM

v1
by
V
Vijayraghavan
Hệ thống thiết kế TCM
Loading...
Chuyển đến nội dung
AD
Nền tảng giao diện người dùng cho doanh nghiệp

Hệ thống Thiết kế TCM

Hệ thống thiết kế toàn diện, có khả năng tiếp cận, được dẫn dắt bởi token cho sản phẩm doanh nghiệp, biểu mẫu phức tạp, quy trình làm việc đa phương tiện phong phú và ứng dụng nhiều dữ liệu.

Khám phá token Mở playground
15khu vực đặc tả
120+thành phần & mẫu
AAMục tiêu WCAG

Khả năng tiếp cận mặc định

Điều khiển ưu tiên bàn phím, vùng focus hiển thị rõ, trạng thái ARIA, vùng trực tiếp (live region), hỗ trợ giảm chuyển động và chế độ độ tương phản cao.

Kiến trúc có thể kết hợp

Token, thành phần, trạng thái biểu mẫu và hành vi được tách biệt để nhóm có thể tích hợp React, Vue, Angular hoặc Web Components.

Quy mô doanh nghiệp

Mẫu bao phủ lưới dữ liệu dày đặc, biểu mẫu thích ứng, trình quản lý tệp, xem trước phương tiện và công cụ cho nhà phát triển.

Bản đồ phạm vi bao phủ

Ma trận triển khai đặc tả

Nền tảng

Design Tokens & Theming

Mọi quyết định hiển thị đều được điều khiển bởi các biến CSS có thể được chuyển đổi trong thời gian chạy mà không cần tải lại trang.

Bộ chuyển đổi giao diện khi chạy

Chọn hệ thống, sáng, tối, thương hiệu tùy chỉnh hoặc độ tương phản cao. Tùy chọn của bạn sẽ được lưu lại bằng Miniapps storage API khi khả dụng.

Màu chủ đạo Thang bán kính bo góc Mật độ

Xem trước token trực tiếp

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

Nhóm token

Màu sắc, kiểu chữ, khoảng cách, độ nâng, độ mờ, dải màu chuyển sắc, z-index, chuyển động và các điểm ngắt.

Điều khiển

Điều khiển nhập liệu cốt lõi

Các trường nhập liệu được kiểm tra, che mặt nạ, hỗ trợ media và dạng trình soạn thảo cho các trình dựng biểu mẫu doanh nghiệp.

Trường chuẩn, số và có mặt nạ

Ô văn bản Email Mật khẩu Số điện thoại Tiền tệ Phần trăm Vùng văn bản

Văn bản phong phú, markdown và trình soạn thảo mã

Bold List Code 
<tcm-input required validation="email" />

Tải lên tệp và hình ảnh

Thả tệp vào đâyHình ảnh, PDF, âm thanh, video tối đa 50MB

Bộ chọn màu

Dùng bút hút màu

Bảng ký tên

XóaLưu chữ ký

Ngày, giờ và bản địa hóa

DateTimeDateTime

Thanh phạm vi, độ mờ và trượt

Size Opacity
Preview

Thẻ, chip và chọn nhiều

Mẫu lựa chọn

Điều khiển lựa chọn

Điều khiển lựa chọn đơn, nhiều, phân cấp, theo vị trí địa lý, trực quan và kiểu trình hướng dẫn (wizard).

Checkbox, radio, toggles

Include audit logs Require approval Enterprise BusinessFeature flag

Selectors

CountryLanguageTime zone

Icon, font, shape, pattern

InterSerifMono

Tree view

  • ▾ Design Tokens
    • Colors
    • Typography
    • Motion
  • ▾ Components
    • Inputs
    • Data Grid
    • Overlays

Stepper

  1. Account
  2. Permissions
  3. Review

Tabs and accordion

UsageAPIA11Y
Advanced options

Expandable panels support keyboard access and nested content.

Cấu trúc

Điều hướng & Cấu trúc

Thanh bên, thanh trên, ngăn kéo, menu, breadcrumb, phân trang, bottom sheet và vùng cố định đáp ứng.

Breadcrumbs and pagination

Previous123Next

Menus and context actions

Open context menu
RenameDuplicateDelete

Sticky header/footer and bottom sheet

Sticky product header

Scrollable container content with persistent actions.

Panels and drawers adapt to viewport size.

Sticky action footer
Open bottom sheet
Kiến trúc

Kiến trúc biểu mẫu

Biểu mẫu phản ứng và động với nhóm, mảng, điều khiển lồng nhau, phụ thuộc, xác thực bất đồng bộ và bố cục thích ứng.

Dynamic form builder

Add fieldValidate

Smart wizard

  1. Profile
  2. Rules
  3. Review
BackNext

Validation and state model

Tương tác

Nút & Hành động

Các thao tác chuẩn, gửi/đặt lại, nút biểu tượng, siêu liên kết, trạng thái tải, vô hiệu, đã nhấn, nhóm hành động và quay số nhanh FAB.

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API
ResetPreviewPublish
New docUploadGenerate
Trạng thái

Phản hồi & Chỉ báo

Tiến trình, vòng quay, khung xương, toast, snackbar, cảnh báo, thông báo, huy hiệu, hộp thoại, popover và tooltip.

Alerts and notifications

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

Progress and loading

Open accessible modal
Dữ liệu doanh nghiệp

Hiển thị & Điều khiển dữ liệu

Bảng, lưới, chỉnh sửa trực tiếp, sắp xếp, lọc, tải lười, thẻ, danh sách, phân trang, băng chuyền, thư viện và trình phát media.

Export CSV
ServiceStatusRegionLatencyActions
Previous12Next

Cards and lists

  • BillingUpdated 2m ago
  • IdentityHealthy
  • SearchIndexing

Carousel

‹
Analytics dashboard
›

Media player

Tài nguyên

Tính năng Media & Tệp nâng cao

Trình quản lý tệp, điều hướng thư mục, sắp xếp kéo‑thả, xem trước hình ảnh/âm thanh/video/PDF, nén và quy trình chuyển đổi.

File manager tree

    Media previewer

    Select an asset

    Conversion pipeline

    1. Validate
    2. Compress
    3. Convert
    4. Publish
    Cấu trúc

    Bố cục & Vùng chứa

    Flex, grid, bảng gập, băng chuyền, cột đáp ứng, bố cục tự động, phần tử cố định và điều khiển tràn.

    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.
    Cài đặt

    Tiện ích & Cài đặt

    Định vị địa lý, bản đồ, máy quét QR/mã vạch, tiện ích thời tiết, bộ chuyển đổi giao diện, điều khiển phông nền/viền/đổ bóng và các chế độ màu thích ứng.

    Geolocation and weather

    Get location
    Location output appears here.

    QR and barcode

    Scanner-ready surface for camera integrations.

    Visual settings

    FontShadow
    Mô hình thời gian chạy

    Biểu mẫu — Sự kiện & Quản lý trạng thái

    Hook vòng đời, sự kiện kiểm tra hợp lệ, phụ thuộc, liên kết dữ liệu bất đồng bộ, hoàn tác/làm lại, tự động lưu, khôi phục, theo dõi trạng thái và hoạt ảnh.

    Event timeline

    Simulate lifecycle

    Undo, redo, auto-save

    UndoRedoIdle
    A11Y

    Khả năng truy cập & Khả năng sử dụng

    Thực hành WCAG 2.1 AA cho bàn phím, trình đọc màn hình, độ tương phản, chỉ báo tiêu điểm, giảm chuyển động và khả năng sử dụng trên nhiều thiết bị.

    Checklist

    Live region

    Announce status
    Contrast AA7.8:1
    Thích ứng

    Thiết kế Responsive & Thích ứng

    Bố cục ưu tiên thiết bị di động, breakpoint thích ứng, vùng chạm, tab vuốt được, lớp phủ thân thiện với bàn phím và mật độ giao diện đáp ứng.

    Breakpoint tokens

    Touch-friendly components

    44px targetSwipe tabBottom sheet
    DX

    Trải nghiệm nhà phát triển

    Hỗ trợ TypeScript, tích hợp framework, sân chơi Storybook, xuất token, API chủ đề, import mô-đun, CLI scaffolding và quy ước đặt tên.

    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

    Accessible enterprise modal

    Focus is managed, Escape closes the dialog, and actions are keyboard reachable.

    This action cannot be undone.
    CancelAcknowledge

    Enterprise bottom sheet

    Mobile-friendly surfaces can be dismissed with a button or backdrop tap.

    Done