Lily Design System™

ບົດສອນ Blazor

ອົງປະກອບໄລບຣາຣີຄລາສ Razor ພ້ອມພາຣາມິເຕີ, ChildContent render fragment, ການກະຈາຍຄຸນລັກສະນະ ແລະການທົດສອບ bUnit ໜຶ່ງອັນຕໍ່ອົງປະກອບ.

ສິ່ງທີ່ທ່ານຈະສ້າງ

ແບບຟອມຕິດຕໍ່ນ້ອຍໆ — ຊ່ອງປ້ອນທີ່ມີປ້າຍ, ປຸ່ມສົ່ງ, @bind-Value ການຜູກ, ພຶດຕິກຳແປ້ນພິມ ແລະໂປຣແກຣມອ່ານໜ້າຈໍຈິງ — ທຳອິດເປົ່າ, ຈາກນັ້ນມີຮູບແບບ, ໃນປະມານ 10 ນາທີ.

ກ່ອນທ່ານເລີ່ມ

ທ່ານຕ້ອງການ git ແລະ .NET SDK 8 ຫຼືໃໝ່ກວ່າ. ໂຄງການ Blazor ໃດກໍໃຊ້ໄດ້ — Blazor Web App, Server ຫຼື WebAssembly.

ຂັ້ນຕອນ 1 — ເອົາໂຄດ

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.

ຂັ້ນຕອນ 2 — ອົງປະກອບທຳອິດຂອງທ່ານ

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

ສະແດງ <button class="button">. ຂໍ້ຕົກລົງພາຣາມິເຕີທີ່ແບ່ງປັນ: Label ( aria-label ການແທນທີ່), CssClass (ຕໍ່ທ້າຍ base hook), ChildContent, ແລະ [Parameter(CaptureUnmatchedValues = true)] ການກະຈາຍຄຸນລັກສະນະ ເພື່ອໃຫ້ຄຸນລັກສະນະ HTML ພິເສດໃດໆຜ່ານໄດ້.

ຂັ້ນຕອນ 3 — ປະກອບແບບຟອມນ້ອຍໆ

<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: ຈຸດສຸມເຄື່ອນຜ່ານທຸກການຄວບຄຸມ, ປ້າຍຖືກປະກາດ ແລະການສົ່ງເຮັດວຽກ. ພຶດຕິກຳສຳເລັດແລ້ວ; ລັກສະນະເປັນຂອງທ່ານ ແລະເປັນຂັ້ນຕໍ່ໄປ.

ຂັ້ນຕອນ 4 — ໃສ່ຮູບແບບ

ໃສ່ຮູບແບບ class hook — .button, .text-input, .label, .field — ໃນ app.css, ຫຼືເຊື່ອມຕໍ່ຮູບແບບສີສັນສຳເລັດຮູບໃນ App.razor / index.html: 

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

ຂັ້ນຕອນ 5 — ເບິ່ງທຸກຢ່າງເຮັດວຽກ

ແອັບຕົວຢ່າງ 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

ຂັ້ນຕອນຕໍ່ໄປ

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.