Blazori õpetus — Lily Design System

Mida sa ehitad

Väike kontaktivorm — sildiga väli, saatmisnupp, @bind-Value sidumine, tõeline klaviatuuri- ja ekraanilugeja käitumine — esmalt paljas, seejärel kujundatud, umbes 10 minutiga.

Enne alustamist

Vaja on gitti ja .NET SDK 8 või uuemat. Sobib iga Blazori projekt — Blazor Web App, Server või WebAssembly.

Samm 1 — Hangi kood

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

Komponendid asuvad kaustas src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — igaüks üks Razor-fail. Viita projektile (või kopeeri failid) oma Blazori rakendusest ja lisa @using LilyBlazorHeadless.Components faili _Imports.razor.

Samm 2 — Sinu esimene komponent

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

Renderdab <button class="button">. Ühised parameetrikokkulepped: Label ( aria-label ülekirjutamiseks), CssClass (lisatakse baaskonksule), ChildContentja [Parameter(CaptureUnmatchedValues = true)] atribuutide laiali jagamine, et iga lisa-HTML-atribuut läbi läheks.

Samm 3 — Kombineeri väike vorm

<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 võtab nähtava Label oma parameetrina pesastatud sildikomponendi asemel — anna see üks kord edasi, elemendile Fieldja TextInputelemendist Label annab ligipääsetava nime.

Kontrollitud 2026-08-29: varasem mustand pesastas eraldi Label komponendi elementi Field, mis renderdab kaks silti (üks tühi), sest Field renderdab juba oma sildi Label parameeter — avastatud komponendi lähtekoodi kontrollides; Form ise ei oma Label parameetrit, nii et varasema mustandi <Form> kasutus parandati selle ära jätmiseks, selle asemel et välja mõelda olematu atribuut. Koostatud kontaktivormi marsruut on sama muster, proovitud päris e2e- ja axe-testidega.

Kontrolli oma tööd: käivita rakendus ja vorm paistab paljas — täpselt nagu ette nähtud: kujundamine on alles ees. Vajuta Tab: fookus liigub läbi iga juhtelemendi, silt kuulutatakse ette ja saatmine töötab. Käitumine on valmis; välimus on sinu ja järgmine samm.

Samm 4 — Kujunda see

Kujunda klassikonksud — .button, .text-input, .label, .field — failis app.cssvõi lingi valmis teema failis App.razor / index.html:

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

Samm 5 — Vaata kõike töötamas

Blazor Web näiterakendus näitab kogu kataloogi kujundatuna ja demonstreeritult, Playwright e2e-testidega:

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

Järgmised sammud

Teemad — vahetamine töö ajal Blazori theme-picker abiga (Razor-klasside teek NuGetis).
Eelistuste abilised — keel ja teksti suurus.
Komponentide kataloog — omadused, ARIA ja klaviatuur komponendi kohta.

Küsimusi teel? Abileht on täis vastuseid — ja kui mõni samm saaks olla selgem, anna meile teada ja me parandame õpetust hea meelega.