TCM Design System

TCM Design System

v1
by
V
Vijayraghavan
TCM Design System
Loading...
TCM Design System
AD
แพลตฟอร์ม UI สำหรับองค์กร

TCM Design System

ระบบออกแบบที่ครบถ้วน เข้าถึงได้ และขับเคลื่อนด้วยโทเคน สำหรับผลิตภัณฑ์ระดับองค์กร ฟอร์มที่ซับซ้อน เวิร์กโฟลว์สื่อสมบูรณ์ และแอปพลิเคชันที่เน้นข้อมูลจำนวนมาก

15พื้นที่สเปค
120+คอมโพเนนต์และแพตเทิร์น
AAเป้าหมาย WCAG

เข้าถึงได้โดยค่าเริ่มต้น

การควบคุมที่เน้นคีย์บอร์ดเป็นหลัก โฟกัสที่มองเห็นได้ สถานะ ARIA พื้นที่ประกาศสด การรองรับการลดแอนิเมชัน และโหมดคอนทราสต์สูง

สถาปัตยกรรมแบบประกอบได้

โทเคน คอมโพเนนต์ สถานะของฟอร์ม และพฤติกรรมถูกแยกจากกัน เพื่อให้ทีมสามารถผสานการทำงานกับ React, Vue, Angular หรือ Web Components ได้

รองรับระดับองค์กร

แพตเทิร์นครอบคลุมกริดข้อมูลหนาแน่น ฟอร์มแบบปรับตัว ตัวจัดการไฟล์ พรีวิวสื่อ และเครื่องมือสำหรับนักพัฒนา

แผนที่ความครอบคลุม

เมทริกซ์การทำให้เป็นจริงของสเปค

พื้นฐาน

ดีไซน์โทเคนและการกำหนดธีม

การตัดสินใจด้านภาพทั้งหมดถูกขับเคลื่อนด้วยตัวแปร CSS ซึ่งสามารถสลับได้ระหว่างรันไทม์โดยไม่ต้องโหลดหน้าใหม่

ตัวสลับธีมขณะรันไทม์

เลือกใช้ระบบ โหมดสว่าง โหมดเข้ม แบรนด์กำหนดเอง หรือโหมดคอนทราสต์สูง การตั้งค่าจะถูกบันทึกไว้ด้วย Miniapps storage API หากมีให้ใช้

พรีวิวโทเคนแบบสด

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

หมวดโทเคน

สี ตัวอักษร ระยะห่าง ระดับความลอยตัว ความทึบ ไล่ระดับสี z-index การเคลื่อนไหว และจุดเปลี่ยนหน้าจอ (breakpoints)

รูปแบบการควบคุม

รูปแบบการป้อนข้อมูลหลัก

อินพุตที่ตรวจสอบความถูกต้อง มีมาสก์ รองรับมีเดีย และสไตล์ตัวแก้ไขสำหรับเครื่องมือสร้างฟอร์มระดับองค์กร

ฟิลด์มาตรฐาน ตัวเลข และมาสก์

ข้อความริชเท็กซ์ มาร์กดาวน์ และตัวแก้ไขโค้ด

<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 speed dial)

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
    องค์ประกอบ

    เลย์เอาต์และคอนเทนเนอร์

    Flex, grid, แผงยุบได้ แครูเซล คอลัมน์ตอบสนอง เค้าโครงอัตโนมัติ องค์ประกอบแบบติดหนึบ และการควบคุมการล้น

    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