Lily Design System™

Tutorial Blazor

Componente de bibliotecă de clase Razor cu parametri, ChildContent fragmente de randare, distribuire de atribute și un test bUnit pe componentă.

Ce vei construi

Un mic formular de contact — câmp cu etichetă, buton de trimitere, @bind-Value legare, comportament real al tastaturii și al cititorului de ecran — mai întâi simplu, apoi stilizat, în aproximativ 10 minute.

Înainte să începi

Ai nevoie de git și .NET SDK 8 sau mai nou. Orice proiect Blazor merge — Blazor Web App, Server sau WebAssembly.

Pasul 1 — Obține codul

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

Componentele se află în src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — câte un fișier Razor fiecare. Referențiază proiectul (sau copiază fișierele) din aplicația ta Blazor și adaugă @using LilyBlazorHeadless.Components la _Imports.razor.

Pasul 2 — Prima ta componentă

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

Randează <button class="button">. Convențiile comune ale parametrilor: Label (un aria-label pentru suprascriere), CssClass (adăugat la cârligul de bază), ChildContentși [Parameter(CaptureUnmatchedValues = true)] distribuire de atribute, astfel încât orice atribut HTML suplimentar să treacă mai departe.

Pasul 3 — Compune un formular mic

<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 primește Label vizibilă ca propriul parametru, în loc de o componentă etichetă imbricată — transmite-o o singură dată, pe Fieldși TextInputcorespunzător din Label oferă numele accesibil.

Verificat la 2026-08-29: o ciornă anterioară imbrica o componentă Label separată în Field, ceea ce randa două etichete (una goală) deoarece Field randează deja propria etichetă din intrarea Label parametru — descoperit verificând codul sursă al componentei; Form însuși nu are parametrul Label , deci utilizarea lui <Form> din ciorna anterioară a fost corectată omițându-l, în loc să se inventeze un atribut inexistent. Ruta compusă a formularului de contact este același tipar, exersat cu teste e2e și axe reale.

Verifică-ți munca: rulează aplicația și formularul arată simplu — exact cum era intenționat: stilizarea urmează. Apasă Tab: focalizarea trece prin fiecare control, eticheta este anunțată, iar trimiterea funcționează. Comportamentul este gata; aspectul este al tău și urmează.

Pasul 4 — Stilizează-l

Stilizează cârligele de clasă — .button, .text-input, .label, .field — în app.csssau leagă o temă gata făcută în App.razor / index.html: 

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

Pasul 5 — Vezi totul funcționând

Aplicația-exemplu Blazor Web arată catalogul complet stilizat și demonstrat, cu teste 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

Pașii următori

  • Teme — comutare în timpul rulării cu ajutorul theme-picker pentru Blazor (o bibliotecă de clase Razor pe NuGet).
  • Ajutoare pentru preferințe — limbă și dimensiunea textului.
  • Catalogul de componente — proprietăți, ARIA și tastatură pentru fiecare componentă.

Întrebări pe parcurs? Pagina de ajutor este plină de răspunsuri — iar dacă un pas poate fi mai clar, spune-ne și vom îmbunătăți cu plăcere tutorialul.