Blazor-handleiding — Lily Design System

Wat je gaat bouwen

Een klein contactformulier — invoerveld met label, verzendknop, @bind-Value -binding, echt toetsenbord- en schermlezergedrag — eerst kaal, dan vormgegeven, in ongeveer 10 minuten.

Voordat je begint

Je hebt git en de .NET SDK 8 of nieuwer nodig. Elk Blazor-project werkt — Blazor Web App, Server of WebAssembly.

Stap 1 — Haal de code op

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

De componenten staan in src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — elk één Razor-bestand. Verwijs vanuit je Blazor-app naar het project (of kopieer de bestanden) en voeg @using LilyBlazorHeadless.Components toe aan _Imports.razor.

Stap 2 — Je eerste component

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

Rendert <button class="button">. De gedeelde parameterconventies: Label (een aria-label om te overschrijven), CssClass (wordt aan de basishaak toegevoegd), ChildContenten [Parameter(CaptureUnmatchedValues = true)] attribute splatting zodat elk extra HTML-attribuut wordt doorgegeven.

Stap 3 — Stel een klein formulier samen

<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 neemt het zichtbare Label als eigen parameter in plaats van een geneste labelcomponent — geef het één keer door, op Fielden TextInputvan Label levert de toegankelijke naam.

Geverifieerd op 2026-08-29: een eerder concept nestelde een aparte Label -component in Field, wat twee labels (een leeg) rendert omdat Field zijn eigen label al rendert vanuit de Label -parameter — ontdekt door de broncode van de component te controleren; Form heeft zelf geen Label -parameter, dus het gebruik van <Form> in het eerdere concept is gecorrigeerd door het weg te laten in plaats van een niet-bestaand attribuut te verzinnen. De samengestelde contactformulierroute is hetzelfde patroon, beproefd met echte e2e- en axe-tests.

Controleer je werk: start de app en het formulier ziet er kaal uit — precies zoals bedoeld: de vormgeving komt nog. Druk op Tab: de focus beweegt door elk bedieningselement, het label wordt voorgelezen en verzenden werkt. Het gedrag is klaar; het uiterlijk is aan jou en komt hierna.

Stap 4 — Geef het vorm

Geef de klassehaken vorm — .button, .text-input, .label, .field — in app.css, of koppel een kant-en-klaar thema in App.razor / index.html:

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

Stap 5 — Zie alles werken

Blazor Web voorbeeld-app toont de volledige catalogus vormgegeven en gedemonstreerd, met Playwright e2e-tests:

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

Volgende stappen

Thema's — wisselen tijdens het draaien met de Blazor-helper theme-picker (een Razor-klassenbibliotheek op NuGet).
Voorkeurenhelpers — taal en tekstgrootte.
Componentencatalogus — props, ARIA en toetsenbord per component.

Vragen onderweg? De helppagina staat vol antwoorden — en als een stap duidelijker kan, laat het ons weten en we verbeteren de handleiding graag.