Tutorja tal-Blazor — Lily Design System

X'se tibni

Formola żgħira ta' kuntatt — qasam b'tikketta, buttuna biex tibgħat, @bind-Value rbit, mġiba vera tat-tastiera u tal-qarrej tal-iskrin — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn git u .NET SDK 8 jew iktar ġdid. Kwalunkwe proġett Blazor jaħdem — Blazor Web App, Server jew WebAssembly.

Pass 1 — Ġib il-kodiċi

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

Il-komponenti jinsabu fi src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — fajl Razor wieħed kull wieħed. Irreferi għall-proġett (jew ikkopja l-fajls) mill-app Blazor tiegħek u żid @using LilyBlazorHeadless.Components ma' _Imports.razor.

Pass 2 — L-ewwel komponent tiegħek

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

Jirrendi <button class="button">. Il-konvenzjonijiet komuni tal-parametri: Label ( aria-label biex tissostitwixxi), CssClass (miżjud mal-ganċ bażi), ChildContentu [Parameter(CaptureUnmatchedValues = true)] firxa tal-attributi biex kwalunkwe attribut HTML żejjed jgħaddi.

Pass 3 — Ikkomponi formola żgħira

<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 jieħu l- Label viżibbli bħala parametru tiegħu stess minflok komponent ta' tikketta mdaħħal — għaddiha darba, fuq Fieldu TextInputkorrispondenti ta' Label jipprovdi l-isem aċċessibbli.

Ivverifikat fl-2026-08-29: abbozz preċedenti daħħal komponent Label separat ġewwa Field, li rrendi żewġ tikketti (waħda vojta) għax Field diġà jirrendi tiegħu stess mill-input Label parametru — skopert billi ġie spezzjonat il-kodiċi tas-sors tal-komponent; Form innifsu m'għandux Label parametru, għalhekk l-użu ta' <Form> fl-abbozz preċedenti ġie kkoreġut billi tħalla barra, minflok jiġi mfittex attribut li ma jeżistix. Ir-rotta komposta tal-formola ta' kuntatt hija l-istess mudell, ittestjat b'testijiet e2e u axe veri.

Iċċekkja x-xogħol tiegħek: mexxi l-app u l-formola tidher għarwiena — eżattament kif intenzjonat: l-istil għad irid jiġi. Agħfas Tab: il-focus jgħaddi minn kull kontroll, it-tikketta tiġi mħabbra u l-ibgħat jaħdem. Il-mġiba lesta; id-dehra hija tiegħek u hija l-pass li jmiss.

Pass 4 — Agħtiha stil

Agħti stil lill-ganċijiet tal-klassi — .button, .text-input, .label, .field — fi app.css, jew evita tema lesta fi App.razor / index.html:

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

Pass 5 — Ara kollox jaħdem

L-app eżempju Blazor Web turi l-katalogu sħiħ bi stil u murija, b'testijiet e2e 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

Passi li jmiss

Temi — bdil waqt it-tħaddim bl-għajnuna theme-picker għal Blazor (librerija ta' klassijiet Razor fuq NuGet).
Għajnuniet tal-preferenzi — lingwa u daqs tat-test.
Katalogu tal-komponenti — proprjetajiet, ARIA u tastiera għal kull komponent.

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.