AppTextดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: as, size, muted, mono, children
Variants: caption / body / large / title / display
SSR-enabled Typography adapter; semantic text/headings; text reflows without truncation.
Design system
ระบบออกแบบสำหรับพื้นที่ทำงานที่เป็นหนึ่งเดียว สม่ำเสมอ เข้าถึงได้ และพร้อมใช้งานบนทุกหน้าจอ
รายละเอียดเล็ก ๆ ที่ทำให้ทุกอย่างลงตัว
องค์ประกอบพื้นฐานและรูปแบบการใช้งานร่วมกัน อ้างอิงทิศทางการออกแบบ Lexon พร้อมปรับปรุงการอ่าน ความสม่ำเสมอ และการเข้าถึง
35REUSABLE COMPONENTS
2 themesLIGHT & DARK
WCAG 2.2 AAACCESSIBILITY TARGET
Thai + LatinTYPOGRAPHY
ข้อมูลตัวอย่างเท่านั้น · Synthetic examples — ไม่มีการเชื่อมต่อระบบหรือข้อมูลจริง
พื้นฐานการออกแบบ
สี ตัวอักษร และองค์ประกอบพื้นฐานที่ใช้ร่วมกัน
ชุดสี Light และ Dark
Light · ธีมสว่าง
Primary
#C8141BText
#241C1ESecondary
#6F6265Success
#146B40Warning
#885000Info
#254FACDark · ธีมมืด
Primary
#FF9A9EText
#F6EFF2Secondary
#C4B4BCSuccess
#7EE2ADWarning
#FFD18AInfo
#A6C2FFตัวอักษรไทยและ Latin
Heading · 22px / 600
ออกแบบให้ชัดเจน ใช้งานได้จริง
Body · 14px / 400
องค์ประกอบที่สม่ำเสมอ สำหรับทุกพื้นที่ทำงาน
Consistent interfaces, considered details.
Caption · 12pxLarge · 18pxAa กข
ปุ่มและการทำงาน
รหัสตัวอย่างจำลอง
DEMO-001ไอคอนบนกริด 24 × 24
มุมโค้งและระยะห่าง
6px
8px
12px
4 · 8 · 12 · 16 · 24 · 32 · 48 pxคู่มือองค์ประกอบ · Props, variants & behavior (6)
AppIconดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: name, title, size
Variants: decorative / named
Server-compatible; title creates accessible name; decorative icons hidden from AT.
AppButtonดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: variant, type, disabled, loading, onClick, href
Variants: primary / secondary / ghost / danger; small / middle / large
Client adapter with SSR; Tab + Enter/Space; loading disables duplicate activation.
AppCopyButtonดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: value, label, disabled
Variants: icon-only; ready / busy / copied / failed / disabled
SSR-enabled clipboard button; label is the full accessible action name. Caller owns visible selectable text. Success resets after 2.2 seconds; failures remain visible. Clipboard requires browser support and permission.
AppCardดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: title, extra, children
Variants: with/without heading
SSR-enabled Ant Design Card; flexible content and wrapped header actions.
AppThemeProviderดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: mode, children
Variants: light / dark
Client provider with SSR; explicit light default; no persisted preference.
ฟอร์มและตัวเลือก
การกรอกข้อมูลที่ชัดเจน พร้อมสถานะและคำอธิบาย
ป้ายกำกับ คำอธิบาย และการแสดงผลในหน้าเริ่มต้น
คู่มือองค์ประกอบ · Props, variants & behavior (8)
AppFieldดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: id, label, description, error, required, children
Variants: default / required / invalid
SSR-enabled Flex/Typography field composition; one controlled child retains caller/field ARIA.
AppInputดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: value, onChange, disabled, readOnly, id
Variants: default / filled / invalid / disabled / read-only
Client adapter; native input semantics; use AppField for visible label.
AppInputPasswordดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: value, onChange, disabled, id
Variants: masked / visible / disabled
Client adapter; keyboard-operable visibility toggle; sample only, not sign-in.
AppTextareaดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: value, onChange, rows, disabled, readOnly
Variants: multiline / invalid / disabled / read-only
Client adapter; wraps long text; no implicit truncation.
AppSelectดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: value, onChange, options, showSearch, disabled
Variants: selected / searchable / disabled
Client adapter; Arrow/Enter/Escape selection; label with AppField.
AppCheckboxดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: checked, indeterminate, onChange, disabled, children
Variants: checked / unchecked / mixed / disabled
Client adapter; Tab + Space; supply visible text.
AppRadioดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: name, checked, onChange, disabled, children
Variants: selected / unselected / disabled
Client adapter; named group with visible label; native keyboard selection.
AppSwitchดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: checked, onChange, disabled, aria-label
Variants: on / off / disabled
Client adapter; Space/Enter; visible or programmatic label required.
โครงสร้างและการนำทาง
จัดลำดับข้อมูลและการนำทางอย่างสม่ำเสมอ
ข้อมูลตัวอย่างเท่านั้น · Synthetic layout content — พื้นที่นี้แสดงหัวข้อ เนื้อหา และปุ่มภายในโครงหน้าร่วม โดยไม่สร้างโมดูลใหม่
EXAMPLE
รายละเอียดตัวอย่าง
หัวข้อและรายละเอียดที่ปรับตามพื้นที่แสดงผล · Long Thai and Latin content remains within the shared workspace.
รายการ | รหัสอ้างอิง | ข้อมูลที่ไม่ทราบ |
|---|---|---|
Example Record · ข้อมูลตัวอย่าง | EXAMPLE-REFERENCE-0000000000000001 | ไม่ทราบข้อมูล |
การ์ดพร้อมหัวข้อ · ตัวอย่าง
เนื้อหาสมมติและปุ่มที่ย้ายบรรทัดตามพื้นที่
การ์ดไม่มีหัวข้อ · ตัวอย่าง
คู่มือองค์ประกอบ · Props, variants & behavior (4)
AppPageHeaderดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: title, description, actions, eyebrow, level
Variants: page / section / wrapped actions
Server-compatible; one page h1; smaller headings in nested examples.
AppDetailListดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: items: label + value
Variants: known / unknown / long values
SSR-enabled Descriptions; explicitly named label/value groups and wrapping.
AppBreadcrumbsดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: items: label + optional href
Variants: linked / current item
SSR-enabled Breadcrumb; meaningful links and aria-current; wraps on small screens.
AppShellดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: items, caption, children, actions, presentation: brand/copy/navigation names; null hides optional copy
Variants: desktop sidebar / mobile drawer / empty navigation / supplied identity / nested links
Server structure + SSR-enabled navigation; one main landmark and skip link. Drawer closes on desktop resize; empty navigation is omitted. Future modules use (protected), login stays outside; no modules or login are created.
ตารางและสถานะ
รูปแบบข้อมูลที่อ่านง่าย พร้อมการเรียงและเลือกรายการ
ทั่วไปสำเร็จรอตรวจสอบเกิดข้อผิดพลาดข้อมูลเพิ่มเติม
คู่มือองค์ประกอบ · Props, variants & behavior (2)
AppTableดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: rows, columns, label, sortKey, sortDirection, onSort, selectedKeys, onSelect, expandedContent, loading
Variants: populated / empty / sortable / selected / expanded / loading
Client adapter; caller owns data and selection; selected keys persist across supplied pages; explicit expansion; labeled contained scrolling.
AppTagดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: tone, children
Variants: neutral / success / warning / danger / info
SSR-enabled Ant Design Tag; status communicated in text as well as color.
ตัวเลขและข้อมูลสรุป
สกุลเงิน วันเวลา และข้อมูลที่ไม่ทราบ แสดงอย่างชัดเจน
ค่าตัวอย่าง · THB
฿1,285.00
จำนวนสมมติ ไม่ใช่ยอดชำระเงินจริง
ค่าที่ทราบแน่นอน
0
30 ต.ค. 2026 17:00
ค่าที่ไม่ทราบ
ไม่ทราบข้อมูล
ไม่มีข้อมูล ไม่แสดงเป็นศูนย์
คู่มือองค์ประกอบ · Props, variants & behavior (1)
AppStatCardดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: label, value, help, href
Variants: value / known zero / unknown
SSR-enabled Card/Statistic; tabular numbers; no business calculation.
สถานะของข้อมูล
แยกสถานะว่าง ล่าช้า ไม่พร้อมใช้ และข้อผิดพลาด
Light · ธีมสว่าง
สถานะตัวอย่างเท่านั้น · Synthetic examples
ข้อมูลพร้อมแสดง
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
กำลังโหลดข้อมูล
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ไม่พบข้อมูล
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
เกิดข้อผิดพลาด
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ไม่สามารถเรียกดูข้อมูลได้
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ข้อมูลบางส่วน
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ข้อมูลล่าช้า
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
Dark · ธีมมืด
สถานะตัวอย่างเท่านั้น · Synthetic examples
ข้อมูลพร้อมแสดง
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
กำลังโหลดข้อมูล
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ไม่พบข้อมูล
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
เกิดข้อผิดพลาด
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ไม่สามารถเรียกดูข้อมูลได้
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ข้อมูลบางส่วน
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ข้อมูลล่าช้า
ข้อมูลสมมติ ไม่มีการเชื่อมต่อระบบจริง
ข้อมูลล่าช้าแสดง ณ 30 ต.ค. 2026 17:00ครบถ้วนถึง 30 ต.ค. 2026 16:30
กำลังดำเนินการ
คู่มือองค์ประกอบ · Props, variants & behavior (5)
AppAlertดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: state, title, description
Variants: populated / loading / empty / error / unavailable / partial / stale
Client adapter with SSR; safe persistent messages; error uses alert role.
AppEmptyStateดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: title, description, onRetry
Variants: empty / optional retry
Client adapter with SSR; retry only when callback exists.
AppSkeletonดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: label
Variants: loading / reduced motion
SSR-enabled Ant Design Skeleton; named busy status; not the only initial page content.
AppSpinnerดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: label
Variants: busy / reduced motion
SSR-enabled Ant Design Spin; named status; motion reduced by user preference.
AppFreshnessดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: snapshot, completeThrough, stale
Variants: known / unknown / stale
Server-compatible; fixed caller metadata and explicit Bangkok timezone.
กล่องโต้ตอบและข้อความ
โต้ตอบโดยไม่สูญเสียบริบทและตำแหน่งโฟกัส
กล่องโต้ตอบ แผงด้านข้าง คำแนะนำ และข้อความแจ้งเตือน พร้อมการควบคุมด้วยแป้นพิมพ์
คู่มือองค์ประกอบ · Props, variants & behavior (5)
AppModalดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: open, onClose, title, description, onConfirm, busy, children
Variants: closed / open / confirming
Client adapter; focus containment + restoration, inert background, Escape/close allowed.
AppDrawerดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: open, onClose, title, description, children
Variants: closed / open / small viewport
Client adapter; focus containment + restoration and safe viewport sizing.
AppTooltipดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: title, children
Variants: hover / focus
Client adapter; trigger must already have accessible name.
AppToastProviderดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: children; useAppToast hook
Variants: success / info / warning / error
Client adapter; theme-aware transient feedback; critical errors stay in persistent alerts.
AppExportPreviewดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: count, summary, disabled
Variants: available / disabled / simulated completion
Client adapter; previews synthetic exports without generating files or asserting permissions.
ตัวกรองและการแบ่งหน้า
องค์ประกอบแบบควบคุมโดยผู้ใช้งาน ไม่มีการดึงข้อมูลจริง
ทดลองกรอง เรียงลำดับ และแบ่งหน้ารายการสมมติ รวมถึงสถานะการทำงาน
คู่มือองค์ประกอบ · Props, variants & behavior (4)
AppDateRangeดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: value: start/end ISO dates, onChange, disabled, label, resetKey
Variants: empty / partial / valid / invalid / disabled / reset
Native Ant Design RangePicker; controlled YYYY-MM-DD strings, partial/clear, strict errors and resetKey draft reset.
AppFilterToolbarดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: children, summary, onReset
Variants: default / active filters / reset
Client adapter; wraps fields, summary status, explicit reset action.
AppPaginationดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: page, pageSize, total, onChange
Variants: first / middle / last / zero total; sizes 10/25/50/100
Client adapter; caller owns page; sizes capped at 100; filter/size changes reset page.
AppTabsดูตัวอย่าง · เปิดกลุ่ม INTERACTIVE เพื่อทดลองสถานะ
Props: items, activeKey, onChange, label
Variants: selected / unselected / disabled
Native Ant Design Tabs; Arrow/Home/End focus, Enter/Space activation; named tablist and linked panels.
การแสดงผลอ่านอย่างเดียว
รูปแบบการแสดงรายละเอียดที่ปลอดภัยและตรวจสอบได้
รายการตัวอย่าง | สถานะการแสดงผล | วันที่ตัวอย่าง |
|---|---|---|
Example Record · รายการสมมติ | อ่านอย่างเดียว | 30 ต.ค. 2026 17:00 |
ข้อมูลที่ไม่มี | ||
ไม่ทราบข้อมูล | ||