Blazor oktatóanyag — Lily Design System

Mit fogsz építeni

Egy kis kapcsolatfelvételi űrlap — címkézett mező, küldés gomb, @bind-Value kötés, valódi billentyűzet- és képernyőolvasó-viselkedés — először csupaszon, aztán stílusosan, nagyjából 10 perc alatt.

Mielőtt elkezdenéd

Szükséged van gitre és a .NET SDK 8-ra vagy újabbra. Bármelyik Blazor projekt megfelel — Blazor Web App, Server vagy WebAssembly.

1. lépés — Szerezd meg a kódot

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

A komponensek itt vannak: src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — mindegyik egy Razor-fájl. Hivatkozz a projektre (vagy másold a fájlokat) a Blazor-alkalmazásodból, és add hozzá a @using LilyBlazorHeadless.Components fájlhoz: _Imports.razor.

2. lépés — Az első komponensed

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

Ezt rendereli: <button class="button">. A közös paraméterkonvenciók: Label (egy aria-label felülíráshoz), CssClass (hozzáfűződik az alapkampóhoz), ChildContentés [Parameter(CaptureUnmatchedValues = true)] attribútumszórás, hogy bármely további HTML-attribútum átjusson.

3. lépés — Állíts össze egy kis űrlapot

<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 a látható Label értéket a saját paramétereként veszi át beágyazott címkekomponens helyett — add át egyszer, a Fieldés TextInputa Label biztosítja a hozzáférhető nevet.

Ellenőrizve 2026-08-29: egy korábbi vázlat külön Label komponenst ágyazott be a Fieldelembe, ami két címkét renderelt (az egyik üres), mert a Field már magától rendereli a sajátját a Label paraméter — a komponens forráskódjának ellenőrzésével derült ki; Form maga nem rendelkezik Label paraméterrel, ezért a korábbi vázlat <Form> használatát úgy javítottuk, hogy kihagyjuk, ahelyett hogy nemlétező attribútumot találnánk ki. Az összeállított kapcsolatfelvételi űrlap útvonala ugyanez a minta, valódi e2e- és axe-tesztekkel kipróbálva.

Ellenőrizd a munkádat: indítsd el az alkalmazást, és az űrlap csupasznak látszik — pontosan úgy, ahogy szántuk: a stílus még hátravan. Nyomd meg a Tabbillentyűt: a fókusz végigmegy minden vezérlőn, a címkét bemondja, és a küldés működik. A viselkedés kész; a megjelenés a tiéd, és a következő lépés.

4. lépés — Stílus hozzá

Stílusozd az osztálykampókat — .button, .text-input, .label, .field — itt: app.css, vagy hivatkozz egy kész témára itt: App.razor / index.html:

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

5. lépés — Nézd meg, ahogy az egész működik

A Blazor Web példaalkalmazás a teljes katalógust stílusosan és bemutatva mutatja, Playwright e2e tesztekkel:

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

További lépések

Témák — váltás futásidőben a Blazor theme-picker segédjével (Razor osztálykönyvtár a NuGeten).
Beállítási segédek — nyelv és szövegméret.
Komponenskatalógus — tulajdonságok, ARIA és billentyűzet komponensenként.

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.