Lily Design System™

Koyarwar Blazor

Abubuwan ɗakin karatu na ajin Razor masu sigogi, ChildContent gutsattsarin zane, yaɗa sifofi da gwajin bUnit ɗaya ga kowane abu.

Abin da za ka gina

Ƙaramin fom na tuntuɓa — fili mai lakabi, maɓallin aikawa, @bind-Value ɗaure, ainihin halayyar maɓallan rubutu da na'urar karanta allo — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar git da .NET SDK 8 ko sabo. Kowane aikin Blazor yana aiki — Blazor Web App, Server ko WebAssembly.

Mataki na 1 — Ɗauki lambar

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

Abubuwan suna cikin src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — fayil ɗin Razor ɗaya kowanne. Yi nuni ga aikin (ko kwafi fayilolin) daga app ɗin Blazor ɗinka kuma ƙara @using LilyBlazorHeadless.Components zuwa _Imports.razor.

Mataki na 2 — Abu na farko naka

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

Yana nuna <button class="button">. Ka'idojin sigogi na gamayya: Label ( aria-label don gyara), CssClass (ana ƙara shi zuwa ƙugiyar tushe), ChildContentda [Parameter(CaptureUnmatchedValues = true)] yaɗa sifofi domin kowane ƙarin sifar HTML ya wuce.

Mataki na 3 — Haɗa ƙaramin fom

<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 yana ɗaukar Label da ake gani a matsayin sigarsa maimakon abin lakabi da aka saka a ciki — ka ba shi sau ɗaya, a kan Fieldda TextInputmai dacewa na Label yana ba da suna mai sauƙin isa.

An tabbatar a 2026-08-29: wani daftarin da ya gabata ya saka wani abu Label daban a cikin Field, wanda ya nuna lakabi biyu (ɗaya fanko) saboda Field tuni yana nuna nasa daga shigarwar Label sigar — an gano ta hanyar duba lambar tushe ta abun; Form da kansa ba shi da sigar Label , don haka an gyara amfani da <Form> na daftarin da ya gabata ta barin sa, maimakon ƙirƙirar sifar da babu ita. Hanyar fom ɗin tuntuɓa da aka haɗa tsari ɗaya ne, wanda aka gwada da ainihin gwaje-gwajen e2e da axe.

Duba aikinka: gudanar da app ɗin kuma fom ɗin yana kama da maras tsari — daidai kamar yadda aka nufa: tsarin yana nan gaba. Danna Tab: mayar da hankali yana ratsa kowane abin sarrafawa, ana sanar da lakabin, kuma aikawa yana aiki. An gama halayyar; kamannin naka ne kuma shi ne mataki na gaba.

Mataki na 4 — Ba shi tsari

Ba ƙugiyoyin aji tsari — .button, .text-input, .label, .field — a cikin app.css, ko haɗa jigon da aka shirya a cikin App.razor / index.html: 

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

Mataki na 5 — Kalli komai yana aiki

App ɗin misali na Blazor Web yana nuna cikakken kundin da tsari da nunawa, tare da gwaje-gwajen e2e na Playwright: 

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

Matakai na gaba

  • Jigogi — sauyawa lokacin aiki da mai taimakon theme-picker na Blazor (ɗakin karatu na ajin Razor a NuGet).
  • Masu taimakon abubuwan so — harshe da girman rubutu.
  • Kundin abubuwa — siffofi, ARIA da maɓallan rubutu ga kowane abu.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.