វេទិកា UI សម្រាប់សហគ្រាស

ប្រព័ន្ធរចនា TCM

ប្រព័ន្ធរចនាដែលមានលក្ខណៈពេញលេញ ងាយយល់ និងដំណើរការដោយតូខឹន សម្រាប់ផលិតផលកម្រិតសហគ្រាស សំណុំបែបបទស្មុគស្មាញ លំហរការងារមេឌៀពហុមុខងារ និងកម្មវិធីដែលមានទិន្នន័យច្រើន។

ស្វែងយល់អំពី Token បើកទីលេងសាកល្បង

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 ចលនា និងចំណុចបំបែក។

វិធានបំពេញបញ្ជា

វិធានបំពេញបញ្ជាផ្ទេរកិច្ចស្នូល

ព័ត៌មានបញ្ចូលដែលបានបញ្ជាក់ ត្រូវពាក់កណ្តាល ប្រតិបត្តិការមេឌៀ និងមានរចនាប័ទ្មកែសម្រួល សម្រាប់អ្នកបង្កើតទ្រង់ទ្រាយសំណុំបែបបទកម្រិតសហគ្រាស។

វាលខ្នាតស្តង់ដារ លេខ និងវាលបាំង

ប្រអប់អត្ថបទ Email ពាក្យសម្ងាត់ លេខទូរស័ព្ទ រូបិយប័ណ្ណ ភាគរយ តំបន់អត្ថបទ

កម្មវិធីកែសម្រួលអត្ថបទសំបូរ Markdown និងកូដ

Bold List Code

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

ផ្ទុកឡើងឯកសារ និងរូបភាព

ទម្លាក់ឯកសារនៅទីនេះរូបភាព PDF អូឌីយ៉ូ វីដេអូ ធំបំផុត 50MB

ឧបករណ៍ជ្រើសពណ៌

ប្រើ eyedropper

ក្តារហត្ថលេខា

សម្អាតរក្សាទុកហត្ថលេខា

កាលបរិច្ឆេទ ពេលវេលា និងការធ្វើមូលដ្ឋានីយកម្ម

DateTimeDateTime

ជួរអាប់អូស៊ីតេ និងគ្រាប់រំកិល

Size Opacity

Preview

ស្លាក ឈីប និងពហុជ្រើសរើស

លំនាំជ្រើសរើស

វត្ថុបញ្ជាជ្រើសរើស

វត្ថុបញ្ជាជ្រើសរើសតែមួយ ច្រើនដង ជាបង្គុំពេញលេញ តាមភូមិសាស្ត្រ មើលឃើញ និងរចនាបែបអ្នកជំនួយការ (wizard-style)។

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 មានម៉ឺនុយលឿន។

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 ក្រឡាចត្រង្គ បន្ទះបិទបើកបាន ការ៉ុសែល ជួរឈរសម្របខ្លួនស្វ័យប្រវត្តិ ប្លុកជាប់ និងវិធានបរិបូណ៌

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

ម៉ូដែលពេលរត់

ទម្រង់ — ព្រឹត្តិការណ៍ និងការគ្រប់គ្រងស្ថានភាព

Hooks វដ្តជីវិត ព្រឹត្តិការណ៍ធ្វើសុពលភាព ភាពអាស្រ័យ ទិន្នន័យ async binding មុខងារ undo/redo ការរក្សាទុកស្វ័យប្រវត្តិ ការស្តារឡើងវិញ ការតាមដានស្ថានភាព និងចលនា។

Event timeline

Simulate lifecycle

Undo, redo, auto-save

UndoRedoIdle

A11Y

មធ្យោបាយប្រើប្រាស់ & កម្រិតប្រើបាន

អនុវត្តន៍ WCAG 2.1 AA សម្រាប់ក្ដារចុច កម្មវិធីអានអក្សរលើអេក្រង់ កម្រិតពណ៌កម្រិតពន្លឺ សូចនាករផ្ដោត ការកាត់បន្ថយចលនា និងកម្រិតប្រើបានឆ្លងឧបករណ៍ផ្សេងៗ។

Checklist

Live region

Announce status

Contrast AA7.8:1

ឆបតាមបរិបទ

ការរចនាដែលឆ្លើយតប និងឆបតាមបរិបទ

ប្លង់ Mobile-first ចំណុចបំបែកឆបគ្នា គោលដៅប៉ះ ថាបអាចអូសស្វាយបាន ស្រទាប់គម្របងាយប្រើដោយក្ដារចុច និងដង់ស៊ីតេឆ្លើយតប។

Breakpoint tokens

Touch-friendly components

44px targetSwipe tabBottom sheet

បទពិសោធន៍អ្នកអភិវឌ្ឍន៍

ការគាំទ្រ 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