Lily Design System™

មេរៀន Blazor

សមាសភាគបណ្ណាល័យថ្នាក់ Razor ដែលមានប៉ារ៉ាម៉ែត្រ ChildContent បំណែកបង្ហាញ ការរាលដាលគុណលក្ខណៈ និងតេស្ត bUnit មួយក្នុងមួយសមាសភាគ។

អ្វីដែលអ្នកនឹងសាងសង់

ទម្រង់ទំនាក់ទំនងតូចមួយ — វាលបញ្ចូលដែលមានស្លាក ប៊ូតុងដាក់ស្នើ @bind-Value ការចង អាកប្បកិរិយាក្តារចុច និងកម្មវិធីអានអេក្រង់ពិតប្រាកដ — ដំបូងទទេស្អាត បន្ទាប់មកមានរចនាប័ទ្ម ក្នុងរយៈពេលប្រហែល ១០ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

អ្នកត្រូវការ git និង .NET SDK 8 ឬថ្មីជាងនេះ។ គម្រោង Blazor ណាក៏បាន — Blazor Web App, Server ឬ WebAssembly។

ជំហាន ១ — យកកូដ

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-headless
dotnet build
dotnet test      # bUnit — 1,400+ cases across the catalog

សមាសភាគរស់នៅក្នុង src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — ឯកសារ Razor មួយក្នុងមួយសមាសភាគ។ យោងគម្រោង (ឬចម្លងឯកសារ) ពីកម្មវិធី Blazor របស់អ្នក ហើយបន្ថែម @using LilyBlazorHeadless.Components ទៅ _Imports.razor.

ជំហាន ២ — សមាសភាគដំបូងរបស់អ្នក

<Button OnClick="Save">Save</Button>

បង្ហាញ <button class="button">។ អនុសញ្ញាប៉ារ៉ាម៉ែត្រចែករំលែក៖ Label (មួយ aria-label ការបដិសេធ) CssClass (បន្ថែមទៅ hook មូលដ្ឋាន) ChildContentនិង [Parameter(CaptureUnmatchedValues = true)] ការរាលដាលគុណលក្ខណៈ ដើម្បីឱ្យគុណលក្ខណៈ HTML បន្ថែមណាក៏ឆ្លងកាត់។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

<Form OnSubmit="HandleSubmit">
  <Field Label="Full name" Required="true">
    <TextInput Id="name" Label="Full name" @bind-Value="name" Required="true" />
  </Field>
  <Button Type="submit">Save</Button>
</Form>

@code {
  private string name = "";
}

Field យកការមើលឃើញ Label ជាប៉ារ៉ាម៉ែត្រផ្ទាល់ខ្លួន ជាជាងសមាសភាគស្លាកដែលជាប់គ្នា — ឆ្លងវាម្តងនៅលើ Fieldនិង TextInputដែលត្រូវគ្នានៅលើ Label ផ្តល់ឈ្មោះដែលអាចចូលប្រើបាន។

បានផ្ទៀងផ្ទាត់ 2026-08-29៖ សេចក្តីព្រាងដំបូងបានដាក់សមាសភាគដាច់ដោយឡែក Label នៅខាងក្នុង Fieldដែលបង្ហាញ ពីរ ស្លាក (មួយទទេ) ពីព្រោះ Field បានបង្ហាញរបស់ខ្លួនរួចហើយពី Label ប៉ារ៉ាម៉ែត្រ — បានរកឃើញដោយពិនិត្យប្រភពសមាសភាគ; Form គ្មាន Label ប៉ារ៉ាម៉ែត្រផ្ទាល់ខ្លួនទេ ដូច្នេះការប្រើប្រាស់របស់សេចក្តីព្រាងដំបូងនៃ <Form> ត្រូវបានកែតម្រូវដោយដកវាចេញ ជាជាងបង្កើតគុណលក្ខណៈដែលមិនមាន។ ការ ផ្លូវទម្រង់ទំនាក់ទំនងផ្សំ ជាលំនាំដូចគ្នា ដែលធ្វើតេស្តដោយ e2e និង axe ពិតប្រាកដ។

ពិនិត្យការងាររបស់អ្នក៖ ដំណើរការកម្មវិធី ហើយទម្រង់មើលទៅធម្មតា — ដូចដែលបានគ្រោងទុក៖ រចនាប័ទ្មនៅខាងមុខ។ ចុច Tab៖ ការផ្តោតផ្លាស់ទីតាមការគ្រប់គ្រងនីមួយៗ ស្លាកត្រូវបានប្រកាស ហើយការដាក់ស្នើដំណើរការ។ អាកប្បកិរិយាបានចប់; រូបរាងជារបស់អ្នក ហើយជាជំហានបន្ទាប់។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

ដាក់រចនាប័ទ្ម class hook — .button, .text-input, .label, .field — ក្នុង app.cssឬភ្ជាប់ស្បែករួចជាស្រេចក្នុង App.razor / index.html: 

<link rel="stylesheet" href="themes/wireframe.css" />

ជំហាន ៥ — មើលអ្វីៗទាំងអស់ដំណើរការ

កម្មវិធីគំរូ Blazor Web បង្ហាញកាតាឡុកពេញលេញដែលមានរចនាប័ទ្ម និងបង្ហាញ ជាមួយតេស្ត Playwright e2e៖ 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples

ជំហានបន្ទាប់

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។