Lily Design System™

Vodič za Blazor

Komponente biblioteke klasa Razor s parametrima, ChildContent fragmenti iscrtavanja, rasipanje atributa i jedan bUnit test po komponenti.

Što ćete izraditi

Mali kontaktni obrazac — polje s oznakom, gumb za slanje, @bind-Value vezivanje, stvarno ponašanje tipkovnice i čitača zaslona — najprije golo, zatim stilizirano, za otprilike 10 minuta.

Prije nego počnete

Trebaju vam git i .NET SDK 8 ili noviji. Odgovara bilo koji projekt Blazor — Blazor Web App, Server ili WebAssembly.

Korak 1 — Preuzmite kod

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

Komponente se nalaze u src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — po jedna Razor datoteka. Referencirajte projekt (ili kopirajte datoteke) iz svoje Blazor aplikacije i dodajte @using LilyBlazorHeadless.Components u _Imports.razor.

Korak 2 — Vaša prva komponenta

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

Iscrtava <button class="button">. Zajedničke konvencije parametara: Label ( aria-label za nadjačavanje), CssClass (dodaje se osnovnoj kuki), ChildContenti [Parameter(CaptureUnmatchedValues = true)] rasipanje atributa pa svaki dodatni HTML atribut prolazi.

Korak 3 — Sastavite mali obrazac

<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 prima vidljivu Label kao vlastiti parametar umjesto ugniježđene komponente oznake — proslijedite je jednom, na Fieldi TextInputiz Label daje pristupačno ime.

Provjereno 2026-08-29: raniji nacrt ugnijezdio je zasebnu komponentu Label unutar Field, što je iscrtalo dvije oznake (jednu praznu) jer Field već iscrtava vlastitu iz ulaza Label parametar — otkriveno provjerom izvornog koda komponente; Form sam nema parametar Label , pa je uporaba <Form> iz ranijeg nacrta ispravljena izostavljanjem, umjesto izmišljanja atributa koji ne postoji. Složena ruta kontaktnog obrasca isti je uzorak, isproban stvarnim e2e i axe testovima.

Provjerite svoj rad: pokrenite aplikaciju i obrazac izgleda golo — točno kako je zamišljeno: stiliziranje tek slijedi. Pritisnite Tab: fokus prolazi kroz svaku kontrolu, oznaka se izgovara i slanje radi. Ponašanje je gotovo; izgled je vaš i sljedeći je korak.

Korak 4 — Stilizirajte ga

Stilizirajte klasne kuke — .button, .text-input, .label, .field — u app.css, ili povežite gotovu temu u App.razor / index.html: 

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

Korak 5 — Pogledajte kako sve radi

Primjer aplikacija Blazor Web prikazuje cijeli katalog stiliziran i demonstriran, s Playwright e2e testovima: 

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

Sljedeći koraci

  • Teme — prebacivanje tijekom izvođenja pomoćnikom theme-picker za Blazor (biblioteka klasa Razor na NuGetu).
  • Pomoćnici za postavke — jezik i veličina teksta.
  • Katalog komponenti — svojstva, ARIA i tipkovnica po komponenti.

Pitanja usput? Stranica pomoći puna je odgovora — a ako neki korak može biti jasniji, javite nam i rado ćemo poboljšati vodič.