Blazor-vejledning — Lily Design System

Det her bygger du

En lille kontaktformular — felt med etiket, send-knap, @bind-Value -binding, ægte tastatur- og skærmlæseradfærd — først nøgen, derefter formgivet, på omkring 10 minutter.

Før du går i gang

Du skal bruge git og .NET SDK 8 eller nyere. Ethvert Blazor-projekt virker — Blazor Web App, Server eller WebAssembly.

Trin 1 — Hent koden

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

Komponenterne ligger i src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — én Razor-fil hver. Referér til projektet (eller kopiér filerne) fra din Blazor-app og tilføj @using LilyBlazorHeadless.Components til _Imports.razor.

Trin 2 — Din første komponent

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

Gengiver <button class="button">. De fælles parameterkonventioner: Label (et aria-label til at tilsidesætte), CssClass (tilføjes til basekrogen), ChildContentog [Parameter(CaptureUnmatchedValues = true)] attribut-splatting, så enhver ekstra HTML-attribut sendes igennem.

Trin 3 — Sæt en lille formular sammen

<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 tager den synlige Label som sin egen parameter i stedet for en indlejret etiketkomponent — send den én gang, på Fieldog TextInputfra Label giver det tilgængelige navn.

Verificeret 2026-08-29: et tidligere udkast indlejrede en separat Label -komponent i Field, hvilket gengiver to etiketter (en tom), fordi Field allerede gengiver sin egen fra Label -parameter — opdaget ved at tjekke komponentens kildekode; Form har selv ingen Label -parameter, så det tidligere udkasts brug af <Form> blev rettet til at udelade den i stedet for at opfinde en attribut, der ikke findes. Den sammensatte kontaktformularrute er det samme mønster, afprøvet med ægte e2e- og axe-tests.

Tjek dit arbejde: kør appen, og formularen ser nøgen ud — præcis som tilsigtet: formgivningen kommer endnu. Tryk på Tab: fokus flytter sig gennem hver kontrol, etiketten oplæses, og afsendelse virker. Adfærden er færdig; udseendet er dit og er næste skridt.

Trin 4 — Giv den stil

Formgiv klassekrogene — .button, .text-input, .label, .field — i app.css, eller link et færdigt tema i App.razor / index.html:

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

Trin 5 — Se det hele virke

Blazor Web eksempelapp viser hele kataloget formgivet og demonstreret, med 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

Næste skridt

Temaer — skift under kørsel med Blazor-hjælperen theme-picker (et Razor-klassebibliotek på NuGet).
Indstillingshjælpere — sprog og tekststørrelse.
Komponentkatalog — egenskaber, ARIA og tastatur pr. komponent.

Spørgsmål undervejs? Siden Hjælp er fuld af svar — og hvis et trin kan blive tydeligere, så fortæl os det og vi forbedrer gerne vejledningen.