Lily Design System™

Tutorial Blazor

Komponen pustaka kelas Razor kanthi parameter, ChildContent fragmen render, panyebaran atribut lan siji tes bUnit saben komponen.

Apa sing bakal sampeyan gawé

Formulir kontak cilik — kolom nganggo label, tombol kirim, @bind-Value pengikatan, prilaku keyboard lan pamaca layar sing nyata — dhisik polosan, banjur ditata, kira-kira 10 menit.

Sadurunge miwiti

Sampeyan butuh git lan .NET SDK 8 utawa luwih anyar. Proyek Blazor apa wae bisa — Blazor Web App, Server utawa WebAssembly.

Langkah 1 — Njupuk kode

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

Komponen manggon ing src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — siji berkas Razor saben siji. Rujuk proyek (utawa salin berkas) saka aplikasi Blazor sampeyan lan tambahna @using LilyBlazorHeadless.Components menyang _Imports.razor.

Langkah 2 — Komponen pisanan sampeyan

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

Nampilaké <button class="button">. Konvènsi parameter bebarengan: Label ( aria-label kanggo nimpa), CssClass (ditambahaké menyang pancingan dhasar), ChildContentlan [Parameter(CaptureUnmatchedValues = true)] panyebaran atribut supaya atribut HTML tambahan apa wae diterusaké.

Langkah 3 — Nyusun formulir cilik

<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 nampa Label sing katon minangka parameter dhéwé, dudu komponen label sing disarangaké — lulusna sepisan, ing Fieldlan TextInputsing cocog saka Label nyedhiyakaké jeneng sing bisa diakses.

Dikonfirmasi 2026-08-29: konsep sadurungé nyarangaké komponen Label kapisah ing njero Field, sing nampilaké rong label (siji kosong) amarga Field wis nampilaké dhéwé saka input Label parameter — ditemokaké kanthi mriksa kode sumber komponen; Form dhéwé ora nduwé Label parameter, mula panggunaan <Form> ing konsep sadurungé didandani kanthi ngilangi, tinimbang nggawé atribut sing ora ana. Rute formulir kontak gabungan iku pola sing padha, diuji nganggo tes e2e lan axe nyata.

Priksa pagawéan sampeyan: jalanna aplikasi lan formulir katon polosan — persis kaya sing dikarepaké: penataan isih ing ngarep. Pencet Tab: fokus mlaku liwat saben kontrol, label diumumaké lan kirim mlaku. Prilaku wis rampung; tampilan iku duwèkmu lan dadi langkah sabanjuré.

Langkah 4 — Tata

Tata pancingan kelas — .button, .text-input, .label, .field — ing app.css, utawa sambungna tema sing wis siap ing App.razor / index.html: 

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

Langkah 5 — Deleng kabèh mlaku

Aplikasi conto Blazor Web nampilaké katalog lengkap sing ditata lan didemonstrasiaké, kanthi tes 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

Langkah sabanjuré

  • Tema — ganti nalika mlaku nganggo pembantu theme-picker Blazor (pustaka kelas Razor ing NuGet).
  • Pembantu preferensi — basa lan ukuran teks.
  • Katalog komponen — properti, ARIA lan keyboard saben komponen.

Ana pitakon ing dalan? Kaca pitulung kebak wangsulan — lan menawa ana langkah sing bisa luwih cetha, kandhanana kita lan kita bakal seneng nyaosi tutorial luwih apik.