Samouczek Blazor — Lily Design System

Co zbudujesz

Mały formularz kontaktowy — pole z etykietą, przycisk wysyłania, @bind-Value wiązanie, prawdziwe działanie klawiatury i czytnika ekranu — najpierw surowy, potem ostylowany, w około 10 minut.

Zanim zaczniesz

Potrzebujesz gita i .NET SDK 8 lub nowszego. Dowolny projekt Blazor się nadaje — Blazor Web App, Server lub WebAssembly.

Krok 1 — Pobierz 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

Komponenty znajdują się w src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — po jednym pliku Razor. Odwołaj się do projektu (lub skopiuj pliki) z aplikacji Blazor i dodaj @using LilyBlazorHeadless.Components do _Imports.razor.

Krok 2 — Twój pierwszy komponent

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

Renderuje <button class="button">. Wspólne konwencje parametrów: Label ( aria-label do nadpisywania), CssClass (dopisywany do bazowego haczyka), ChildContentoraz [Parameter(CaptureUnmatchedValues = true)] rozsmarowywanie atrybutów, dzięki czemu każdy dodatkowy atrybut HTML jest przekazywany dalej.

Krok 3 — Złóż mały formularz

<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 przyjmuje widoczną Label jako własny parametr zamiast zagnieżdżonego komponentu etykiety — przekaż ją raz, na Fieldoraz TextInputz Label dostarcza dostępną nazwę.

Zweryfikowano 2026-08-29: wcześniejszy szkic zagnieżdżał osobny komponent Label wewnątrz Field, co renderowało dwie etykiety (jedną pustą), ponieważ Field już renderuje własną z wejścia Label parametr — wykryto, sprawdzając kod źródłowy komponentu; Form sam nie ma parametru Label , więc użycie <Form> z wcześniejszego szkicu poprawiono, pomijając go, zamiast wymyślać nieistniejący atrybut. Złożona trasa formularza kontaktowego to ten sam wzorzec, sprawdzony prawdziwymi testami e2e i axe.

Sprawdź swoją pracę: uruchom aplikację, a formularz wygląda surowo — dokładnie tak, jak zamierzono: stylowanie jest jeszcze przed nami. Naciśnij Tab: fokus przechodzi przez każdą kontrolkę, etykieta jest odczytywana, a wysyłanie działa. Zachowanie jest gotowe; wygląd należy do ciebie i jest następnym krokiem.

Krok 4 — Ostyluj go

Ostyluj haczyki klas — .button, .text-input, .label, .field — w app.csslub podlinkuj gotowy motyw w App.razor / index.html:

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

Krok 5 — Zobacz, jak to wszystko działa

Aplikacja przykładowa Blazor Web pokazuje cały katalog ostylowany i zademonstrowany, z 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

Następne kroki

Motywy — przełączanie w czasie działania pomocnikiem theme-picker dla Blazora (biblioteka klas Razor w NuGet).
Pomocniki preferencji — język i rozmiar tekstu.
Katalog komponentów — właściwości, ARIA i klawiatura dla każdego komponentu.

Pytania po drodze? Strona pomocy jest pełna odpowiedzi — a jeśli jakiś krok mógłby być jaśniejszy, daj nam znać a chętnie ulepszymy samouczek.