Lily Design System™

Blazor-handledning

Komponenter i ett Razor-klassbibliotek med parametrar, ChildContent renderingsfragment, attribut-splatting och ett bUnit-test per komponent.

Det här bygger du

Ett litet kontaktformulär — fält med etikett, skicka-knapp, @bind-Value -bindning, verkligt tangentbords- och skärmläsarbeteende — först naket, sedan formgivet, på ungefär 10 minuter.

Innan du börjar

Du behöver git och .NET SDK 8 eller senare. Alla Blazor-projekt fungerar — Blazor Web App, Server eller WebAssembly.

Steg 1 — Hämta 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

Komponenterna finns i src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — en Razor-fil vardera. Referera till projektet (eller kopiera filerna) från din Blazor-app och lägg till @using LilyBlazorHeadless.Components i _Imports.razor.

Steg 2 — Din första komponent

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

Renderar <button class="button">. De gemensamma parameterkonventionerna: Label (ett aria-label för att åsidosätta), CssClass (läggs till på baskroken), ChildContentoch [Parameter(CaptureUnmatchedValues = true)] attribut-splatting så att varje extra HTML-attribut skickas igenom.

Steg 3 — Sätt ihop ett litet formulär

<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 tar den synliga Label som sin egen parameter i stället för en nästlad etikettkomponent — skicka den en gång, på Fieldoch TextInputfrån Label ger det tillgängliga namnet.

Verifierat 2026-08-29: ett tidigare utkast nästlade en separat Label -komponent i Field, vilket renderar två etiketter (en tom) eftersom Field redan renderar sin egen från Label -parameter — upptäckt genom att granska komponentens källkod; Form har själv ingen Label -parameter, så det tidigare utkastets användning av <Form> rättades till att utelämna den i stället för att hitta på ett attribut som inte finns. Den sammansatta kontaktformulärsrutten är samma mönster, prövat med riktiga e2e- och axe-tester.

Kontrollera ditt arbete: kör appen så ser formuläret kargt ut — precis som tänkt: formgivningen återstår. Tryck på Tab: fokus flyttas genom varje kontroll, etiketten läses upp och inskickning fungerar. Beteendet är klart; utseendet är ditt och kommer härnäst.

Steg 4 — Formge det

Formge klasskrokarna — .button, .text-input, .label, .field — i app.css, eller länka ett färdigt tema i App.razor / index.html: 

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

Steg 5 — Se allt fungera

Exempelappen Blazor Web visar hela katalogen formgiven och demonstrerad, med 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ästa steg

  • Teman — byte under körning med Blazor-hjälparen theme-picker (ett Razor-klassbibliotek på NuGet).
  • Inställningshjälpare — språk och textstorlek.
  • Komponentkatalog — egenskaper, ARIA och tangentbord per komponent.

Frågor på vägen? Hjälpsidan är full av svar — och om ett steg kan bli tydligare, berätta för oss så förbättrar vi gärna handledningen.