Blazor-Tutorial — Lily Design System

Wat Dir bauen wäert

E klengt Kontaktformulaire — Feld mat Etikett, Schécken-Knäppchen, @bind-Value -Bindung, richtegt Tastatur- an Écranliesser-Verhalen — fir d'éischt nackeg, duerno gestalt, an ongeféier 10 Minutten.

Ier Dir ufänkt

Dir braucht git an den .NET SDK 8 oder méi nei. All Blazor Projet funktionéiert — Blazor Web App, Server oder WebAssembly.

Schrëtt 1 — D'Code kréien

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

D'Komponente sinn am src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — eng Razor-Datei jidd. Referenzéiert de Projet (oder kopéiert d'Dateien) aus Ärer Blazor-App a füügt @using LilyBlazorHeadless.Components bäi zu _Imports.razor.

Schrëtt 2 — Är éischt Komponent

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

Rendert <button class="button">. D'gemeinsam Parameterkonventiounen: Label (en aria-label zum Iwwerschreiwen), CssClass (gëtt un de Basis-Hook ugehaang), ChildContentan [Parameter(CaptureUnmatchedValues = true)] Attribut-Splatting, sou datt all zousätzlechen HTML-Attribut duerchgeleet gëtt.

Schrëtt 3 — E klengt Formulaire zesummestellen

<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 hëlt dat siichtbart Label als säin eegene Parameter amplaz vun enger verschachtelter Etikett-Komponent — gitt et eemol weider, bei Fieldan TextInputvun Label liwwert den zougänglechen Numm.

Gepréift den 2026-08-29: en ale Brouillon huet eng separat Label -Komponent an Fieldverschachtelt, wat zwee Etiketten (eng eidel) gerendert huet, well Field schonn säin eegenen aus dem Label -Parameter — entdeckt duerch d'Kontroll vum Quellcode vun der Komponent; Form selwer huet keen Label -Parameter, dofir gouf d'Benotzung vun <Form> aus dem ale Brouillon korrigéiert andeems et ewechgelooss gouf, amplaz en Attribut z'erfannen, dat net existéiert. Déi zesummegesat Kontaktformulaire-Route ass datselwecht Muster, getest mat richtegen e2e- an axe-Tester.

Kontrolléiert Är Aarbecht: start d'App an d'Formulaire gesäit nackeg aus — genee wéi geduecht: d'Gestaltung kënnt nach. Dréckt Tab: de Fokus geet duerch all Kontroll, d'Etikett gëtt ugekënnegt an d'Schécken funktionéiert. D'Verhalen ass fäerdeg; d'Ausgesi ass Är a kënnt als Nächst.

Schrëtt 4 — Gestalt et

Gestalt d'Klassen-Hooks — .button, .text-input, .label, .field — am app.css, oder verlinkt en fäerdegt Thema am App.razor / index.html:

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

Schrëtt 5 — Alles am Aktioun gesinn

Blazor-Web Beispill-App weist de ganze Katalog gestalt an demonstréiert, mat Playwright e2e-Tester:

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

Nächst Schrëtt

Themen — Wiessel zur Laafzäit mam Blazor-Helper theme-picker (eng Razor-Klassebibliothéik op NuGet).
Astellungs-Helperen — Sprooch a Textgréisst.
Komponentekatalog — Eegeschaften, ARIA an Tastatur pro Komponent.

Froen ënnerwee? D'Hëllefsäit ass voller Äntwerten — a wann e Schrëtt méi kloer kéint sinn, soot et eis a mir verbesseren den Tutorial gär.