Tutorial sa Blazor — Lily Design System

Ang bubuuin mo

Isang maliit na contact form — input na may label, submit button, @bind-Value binding, tunay na gawi ng keyboard at screen reader — una ay hubad, pagkatapos ay may istilo, sa humigit-kumulang 10 minuto.

Bago ka magsimula

Kailangan mo ng git at ng .NET SDK 8 o mas bago. Gumagana ang anumang proyektong Blazor — Blazor Web App, Server, o WebAssembly.

Hakbang 1 — Kunin ang code

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

Nakatira ang mga component sa src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — isang Razor file bawat isa. Mag-reference sa proyekto (o kopyahin ang mga file) mula sa iyong Blazor app at idagdag ang @using LilyBlazorHeadless.Components sa _Imports.razor.

Hakbang 2 — Ang una mong component

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

Nagre-render ng <button class="button">. Ang mga nakabahaging kombensyon ng parameter: Label (isang aria-label override), CssClass (idinurugtong sa base hook), ChildContent, at [Parameter(CaptureUnmatchedValues = true)] attribute splatting para dumaan ang anumang dagdag na HTML attribute.

Hakbang 3 — Bumuo ng maliit na form

<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 ay kumukuha ng nakikitang Label bilang sarili nitong parameter sa halip na nested na label component — ipasa ito nang isang beses, sa Field, at TextInputsa Label ay nagbibigay ng accessible na pangalan.

Napatunayan noong 2026-08-29: nag-nest ang naunang draft ng hiwalay na Label component sa loob ng Field, na nagre-render ng dalawang label (isang walang laman) dahil Field ay nagre-render na ng sarili nito mula sa Label parameter — nahuli sa pamamagitan ng pagsusuri sa source ng component; Form ay walang sariling Label parameter, kaya itinama ang paggamit ng naunang draft ng <Form> sa pamamagitan ng pag-alis nito sa halip na mag-imbento ng attribute na hindi umiiral. Ang composed na ruta ng contact-form ay parehong pattern, sinubukan ng tunay na e2e at axe na pagsusuri.

Suriin ang gawa mo: patakbuhin ang app at mukhang payak ang form — eksakto ayon sa layunin: ang istilo ay nasa unahan pa. Pindutin ang Tab: gumagalaw ang focus sa bawat kontrol, naba-balita ang label, at gumagana ang pagsumite. Tapos na ang gawi; sa iyo ang hitsura at iyon ang susunod.

Hakbang 4 — Bigyan ng istilo

Bigyan ng istilo ang mga class hook — .button, .text-input, .label, .field — sa app.css, o mag-link ng handa nang tema sa App.razor / index.html:

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

Hakbang 5 — Tingnan ang lahat na gumagana

Ang Blazor Web na halimbawang app ay nagpapakita ng buong catalog na may istilo at demo, na may mga Playwright e2e na pagsusuri:

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

Mga susunod na hakbang

Theming — runtime na pagpapalit gamit ang Blazor theme-picker helper (isang Razor class library sa NuGet).
Mga preference helper — wika at laki ng teksto.
Catalog ng component — mga prop, ARIA, at keyboard para sa bawat component.

May mga tanong habang nasa daan? Ang pahina ng tulong ay puno ng mga sagot — at kung maaaring maging mas malinaw ang isang hakbang, sabihin sa amin at masaya naming pagbubutihin ang tutorial.