Návod pre Blazor — Lily Design System

Čo vytvoríte

Malý kontaktný formulár — pole s popisom, tlačidlo odoslať, @bind-Value väzba, skutočné správanie klávesnice a čítačky obrazovky — najprv holý, potom ostylovaný, približne za 10 minút.

Skôr než začnete

Potrebujete git a .NET SDK 8 alebo novší. Hodí sa akýkoľvek projekt Blazor — Blazor Web App, Server alebo WebAssembly.

Krok 1 — Získajte kód

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

Komponenty sú v src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — každý v jednom súbore Razor. Odkážte na projekt (alebo skopírujte súbory) zo svojej aplikácie Blazor a pridajte @using LilyBlazorHeadless.Components do _Imports.razor.

Krok 2 — Váš prvý komponent

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

Vykresľuje <button class="button">. Spoločné konvencie parametrov: Label ( aria-label na prepísanie), CssClass (pripojí sa k základnému háčiku), ChildContenta [Parameter(CaptureUnmatchedValues = true)] rozprestieranie atribútov, takže akýkoľvek ďalší atribút HTML prejde ďalej.

Krok 3 — Zložte malý formulár

<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 prijíma viditeľný Label ako vlastný parameter namiesto vnoreného komponentu popisu — odovzdajte ho raz, pri Fielda TextInputz Label poskytne prístupný názov.

Overené 2026-08-29: skorší koncept vnáral samostatný komponent Label dovnútra Field, čo vykreslilo dva popisy (jeden prázdny), pretože Field už vykresľuje svoj vlastný zo vstupu Label parameter — zistené kontrolou zdrojového kódu komponentu; Form samotný nemá parameter Label , takže použitie <Form> zo skoršieho konceptu bolo opravené vynechaním, namiesto vymýšľania neexistujúceho atribútu. Zložená trasa kontaktného formulára je rovnaký vzor, preverený skutočnými testami e2e a axe.

Skontrolujte svoju prácu: spustite aplikáciu a formulár vyzerá holo — presne podľa zámeru: štýlovanie ešte len príde. Stlačte Tab: fokus prechádza každým ovládacím prvkom, popis sa oznamuje a odoslanie funguje. Správanie je hotové; vzhľad je váš a je ďalším krokom.

Krok 4 — Ostylujte ho

Ostylujte triedne háčiky — .button, .text-input, .label, .field — v app.css, alebo pripojte hotovú tému v App.razor / index.html:

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

Krok 5 — Pozrite sa, ako to celé funguje

Ukážková aplikácia Blazor Web ukazuje celý katalóg ostylovaný a predvedený, s testami 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

Ďalšie kroky

Témy — prepínanie za behu pomocníkom theme-picker pre Blazor (knižnica tried Razor na NuGete).
Pomocníci pre predvoľby — jazyk a veľkosť textu.
Katalóg komponentov — vlastnosti, ARIA a klávesnica pre každý komponent.

Otázky po ceste? Stránka pomocníka je plná odpovedí — a ak by niektorý krok mohol byť jasnejší, dajte nám vedieť a návod radi vylepšíme.