ប្រព័ន្ធរចនាម៉ូដ TCM

ប្រព័ន្ធរចនាម៉ូដ TCM

v1
by
V
Vijayraghavan
ប្រព័ន្ធរចនាម៉ូដ TCM
Loading...
ប្រព័ន្ធរចនា TCM
AD
វេទិកា UI សម្រាប់សហគ្រាស

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Preview

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

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

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

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

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

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

    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

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

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

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

    Event timeline

    Undo, redo, auto-save

    Idle
    A11Y

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

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

    Checklist

    Live region

    Contrast AA7.8:1
    ឆបតាមបរិបទ

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

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

    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