แพลตฟอร์ม UI สำหรับองค์กร

TCM Design System

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

สำรวจโทเคน เปิดสนามทดลอง

15พื้นที่สเปค

120+คอมโพเนนต์และแพตเทิร์น

AAเป้าหมาย WCAG

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

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

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

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

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

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

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

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

พื้นฐาน

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

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

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

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

สีหลัก สเกลรัศมี ความหนาแน่น

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

Primary Secondary Healthy Warning

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

หมวดโทเคน

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

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

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

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

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

กล่องข้อความ Email รหัสผ่าน หมายเลขโทรศัพท์ สกุลเงิน เปอร์เซ็นต์ พื้นที่ข้อความ

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

Bold List Code

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

การอัปโหลดไฟล์และรูปภาพ

วางไฟล์ที่นี่รูปภาพ PDF ไฟล์เสียง วิดีโอ สูงสุด 50MB

ตัวเลือกสี

ใช้ที่ดูดสี

แผ่นลายเซ็น

ล้างบันทึกลายเซ็น

วันที่ เวลา และการปรับตามท้องถิ่น

DateTimeDateTime

ช่วงค่า ความทึบ และสไลเดอร์

Size Opacity

Preview

แท็ก ชิป และการเลือกหลายรายการ

แพตเทิร์นการเลือก

ตัวควบคุมการเลือก

ตัวควบคุมการเลือกแบบเดี่ยว หลายรายการ เชิงลำดับชั้น เชิงภูมิศาสตร์ แบบมองเห็นได้ และแบบวิซาร์ด

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

Account
Permissions
Review

Tabs and accordion

UsageAPIA11Y

Advanced options

Expandable panels support keyboard access and nested content.

โครงสร้าง

การนำทางและโครงสร้าง

แถบด้านข้างที่ตอบสนองต่อหน้าจอ แถบด้านบน ลิ้นชัก เมนู เส้นทางนำทาง การแบ่งหน้า แผ่นด้านล่าง และพื้นที่แบบติดค้าง

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.

Open bottom sheet

สถาปัตยกรรม

สถาปัตยกรรมฟอร์ม

ฟอร์มเชิงปฏิกิริยาและไดนามิกพร้อมกลุ่ม อาร์เรย์ คอนโทรลซ้อน การอ้างอิงกัน การตรวจสอบแบบอะซิงโครนัส และเลย์เอาต์แบบปรับเปลี่ยนได้

Dynamic form builder

Add fieldValidate

Smart wizard

Profile
Rules
Review

BackNext

Validation and state model

การโต้ตอบ

ปุ่มและการกระทำ

การทำงานมาตรฐาน การส่ง/รีเซ็ต ปุ่มไอคอน ไฮเปอร์ลิงก์ สถานะกำลังโหลด ปิดการใช้งาน กดอยู่ กลุ่มการทำงาน และปุ่มลอยแบบโทรด่วน (FAB speed dial)

Save changesCancelRead docsDeleteProcessingDisabledDeveloper API

ResetPreviewPublish

New docUploadGenerate

สถานะ

ข้อเสนอแนะและตัวบ่งชี้

สถานะความคืบหน้า สปินเนอร์ สเกเลตัน ทอสต์ สแน็คบาร์ การแจ้งเตือน ป้ายสถานะ โมดัล ป๊อปโอเวอร์ และทูลทิป

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

ข้อมูลสำหรับองค์กร

การแสดงผลและตัวควบคุมข้อมูล

ตาราง กริด การแก้ไขในบรรทัด การจัดเรียง การกรอง การโหลดแบบขี้เกียจ การ์ด รายการ การแบ่งหน้า ตัวหมุนภาพ แกลเลอรี และเครื่องเล่นมีเดีย

Export CSV

	Service	Status	Region	Latency	Actions

Previous12Next

Cards and lists

BillingUpdated 2m ago
IdentityHealthy
SearchIndexing

Carousel

‹

Analytics dashboard

›

Media player

แอสเซ็ต

คุณสมบัติขั้นสูงสำหรับมีเดียและไฟล์

ตัวจัดการไฟล์ การนำทางโฟลเดอร์ การจัดเรียงด้วยการลากและวาง เครื่องมือพรีวิวรูปภาพ/เสียง/วิดีโอ/PDF การบีบอัด และเวิร์กโฟลว์การแปลงไฟล์

File manager tree

Media previewer

Select an asset

Conversion pipeline

Validate
Compress
Convert
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

Get location

Location output appears here.

QR and barcode

Scanner-ready surface for camera integrations.

Visual settings

FontShadow

โมเดลรันไทม์

ฟอร์ม — การจัดการเหตุการณ์และสถานะ

ฮุควงจรชีวิต อีเวนต์การตรวจสอบความถูกต้อง การอ้างอิงกัน ข้อมูลอะซิงก์แบบผูกติด ย้อนกลับ/ทำซ้ำ บันทึกอัตโนมัติ การกู้คืน การติดตามสถานะ และแอนิเมชัน

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

การช่วยการเข้าถึง (A11Y)

การช่วยการเข้าถึงและการใช้งาน

แนวปฏิบัติ WCAG 2.1 ระดับ AA สำหรับแป้นพิมพ์ ผู้อ่านหน้าจอ คอนทราสต์ ตัวบ่งชี้โฟกัส การลดการเคลื่อนไหว และการใช้งานข้ามอุปกรณ์

Checklist

Live region

Announce status

Contrast AA7.8:1

ปรับตัวได้

การออกแบบที่ตอบสนองและปรับตัวได้

เลย์เอาต์แบบเน้นมือถือก่อน จุดเปลี่ยนขนาดหน้าจอแบบปรับตัว เป้าหมายการสัมผัส แท็บปัดได้ การซ้อนทับที่ใช้งานคีย์บอร์ดได้ดี และความหนาแน่นที่ตอบสนองต่อหน้าจอ

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

ประสบการณ์นักพัฒนา (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