Lily Design System™

Blazor tutoriala

Razor klase-liburutegiko osagaiak parametroekin, ChildContent errendatze-zatiekin, atributu-hedapenarekin eta osagai bakoitzeko bUnit proba batekin.

Zer eraikiko duzun

Harremanetarako formulario txiki bat — etiketadun sarrera, bidaltze-botoia, @bind-Value lotura, teklatu eta pantaila-irakurgailu portaera erreala — lehenik biluzik, gero estilatuta, 10 minutu inguruan.

Hasi aurretik

git eta .NET SDK 8 edo berriagoa behar dituzu. Edozein Blazor proiektuk balio du — Blazor Web App, Server edo WebAssembly.

1. pausoa — Lortu kodea

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

Osagaiak hemen bizi dira: src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — Razor fitxategi bat bakoitza. Egin proiektuari erreferentzia (edo kopiatu fitxategiak) zure Blazor aplikaziotik eta gehitu @using LilyBlazorHeadless.Components honi: _Imports.razor.

2. pausoa — Zure lehen osagaia

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

Errendatzen du <button class="button">. Parametro-hitzarmen partekatuak: Label ( aria-label gainidazketa), CssClass (oinarrizko gakoari erantsia), ChildContent, eta [Parameter(CaptureUnmatchedValues = true)] atributu-hedapena, HTML atributu gehigarri oro pasa dadin.

3. pausoa — Osatu formulario txiki bat

<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 etiketa ikusgarria Label bere parametro gisa hartzen du, etiketa-osagai habiaratu gisa baino — eman behin, Field, eta TextInput-ak Label -n

2026-08-29an egiaztatua: aurreko zirriborro batek Label osagai bereizi bat habiaratzen zuen Fieldbarruan, eta honek bi etiketa errendatzen zituen (bat hutsik) zeren Field -k jada bere etiketa errendatzen baitu Label parametroa — osagaiaren iturburua begiratuz atzeman zen; Form -k ez du Label parametro propiorik, beraz aurreko zirriborroaren <Form> erabilera zuzendu zen hura kenduz, existitzen ez den atributu bat asmatu beharrean. Honek harremanetarako formulario konposatuaren ibilbideak patroi bera du, benetako e2e eta axe probekin erabilia.

Egiaztatu zure lana: exekutatu aplikazioa eta formularioa soila ageri da — hain zuzen nahi bezala: estiloa oraindik aurrean dago. Sakatu Tab: fokua kontrol guztietatik pasatzen da, etiketa iragartzen da eta bidalketak funtzionatzen du. Portaera prest dago; itxura zurea da eta hurrengoa da.

4. pausoa — Estilatu

Estilatu klase-gakoak — .button, .text-input, .label, .field — hemen: app.css, edo lotu prest dagoen gai bat hemen: App.razor / index.html: 

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

5. pausoa — Ikusi dena funtzionatzen

Blazor Web adibide-aplikazioak katalogo osoa estilatuta eta demostratuta erakusten du, Playwright e2e probekin: 

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

Hurrengo pausoak

  • Gaiak — exekuzio-garaiko aldaketa Blazor theme-picker laguntzailearekin (NuGet-eko Razor klase-liburutegia).
  • Lehentasun-laguntzaileak — hizkuntza eta testu-tamaina.
  • Osagai-katalogoa — osagai bakoitzaren propak, ARIA eta teklatua.

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.