Lily Design System™

Mafunzo ya Blazor

Vipengele vya maktaba ya darasa ya Razor vyenye vigezo, ChildContent vipande vya uonyeshaji, ugawaji wa sifa, na jaribio la bUnit kwa kila kipengele.

Utakachojenga

Fomu ndogo ya mawasiliano — pembejeo yenye lebo, kitufe cha kutuma, @bind-Value uunganishaji, tabia halisi ya kibodi na kisomaji skrini — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji git na .NET SDK 8 au zaidi. Mradi wowote wa Blazor unafaa — Blazor Web App, Server, au WebAssembly.

Hatua ya 1 — Pata msimbo

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

Vipengele viko katika src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — faili moja ya Razor kwa kila kimoja. Rejelea mradi huo (au nakili faili) kutoka kwenye programu yako ya Blazor na ongeza @using LilyBlazorHeadless.Components kwenye _Imports.razor.

Hatua ya 2 — Kipengele chako cha kwanza

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

Huonyesha <button class="button">. Kanuni za pamoja za vigezo: Label ( aria-label kubatilisha), CssClass (huongezwa kwenye kishikio cha msingi), ChildContent, na [Parameter(CaptureUnmatchedValues = true)] ugawaji wa sifa ili sifa yoyote ya ziada ya HTML ipite.

Hatua ya 3 — Unda fomu ndogo

<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 huchukua Label inayoonekana kama kigezo chake chenyewe badala ya kipengele cha lebo kilichowekwa ndani — ipitishe mara moja, kwenye Field, na TextInputinayolingana Label hutoa jina linalofikika.

Imethibitishwa 2026-08-29: rasimu ya awali iliweka kipengele tofauti cha Label ndani ya Field, ambacho kilionyesha mbili lebo (moja tupu) kwa sababu Field tayari huonyesha lebo yake yenyewe kutoka kwenye Label kigezo — ilibainika kwa kukagua chanzo cha kipengele; Form yenyewe haina Label kigezo, hivyo matumizi ya <Form> katika rasimu ya awali yalirekebishwa kuliacha badala ya kubuni sifa isiyokuwepo. Njia ya fomu ya mawasiliano iliyounganishwa ni mchoro uleule, uliojaribiwa kwa majaribio halisi ya e2e na axe.

Hakiki kazi yako: endesha programu na fomu inaonekana ya kawaida — kama ilivyokusudiwa: mapambo bado yanakuja. Bonyeza Tab: umakini husogea kwenye kila kidhibiti, lebo inatangazwa, na kutuma kunafanya kazi. Tabia imekamilika; mwonekano ni wako, na ndio unaofuata.

Hatua ya 4 — Ipambe

Pamba vishikio vya darasa — .button, .text-input, .label, .field — katika app.css, au unganisha mandhari yaliyo tayari katika App.razor / index.html: 

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

Hatua ya 5 — Ona kila kitu kikifanya kazi

Programu ya mifano ya Blazor Web inaonyesha orodha kamili ikiwa na mapambo na maonyesho, pamoja na majaribio ya 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

Hatua zinazofuata

  • Mandhari — kubadili wakati wa utekelezaji kwa kisaidizi cha theme-picker cha Blazor (maktaba ya darasa ya Razor kwenye NuGet).
  • Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
  • Orodha ya vipengele — sifa, ARIA, na kibodi kwa kila kipengele.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.