Dyskans Blazor — Lily Design System

Pyth a wrewgh drehevel

Furv kestava byghan — mewnos gans lavell, botton danvon, @bind-Value kesyanns, hwedhel klavyer ha skrin-redyer gwir — kynsa noeth, ena stylys, yn a-dro dhe 10 mynysenn.

Kyns dalleth

Ty a'n jeves othom a git ha'n .NET SDK 8 po nowodhyes. Raglen Blazor vyth a ober — Blazor Web App, Server, po WebAssembly.

Kamm 1 — Kevewgh an koodh

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

An darnow a drig yn src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — unn restren Razor dre bub onan. Gwrewgh kedhlow dhe'n raglen (po kopiewgh an restrennow) dhiworth dha app Blazor ha keworrewgh @using LilyBlazorHeadless.Components dhe _Imports.razor.

Kamm 2 — Dha dharn kynsa

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

Dyskwedh <button class="button">. An usadow parametrow rannys: Label ( aria-label gorholans), CssClass (keworrys dhe'n krok selys), ChildContentha [Parameter(CaptureUnmatchedValues = true)] lesans perthynasow may hyll perthynas HTML ekstra vyth passya.

Kamm 3 — Kesstrewewgh furv byghan

<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 a gemmer an Label hewelus avel parametrow y honan yn le darn lavell nessys — passewgh hi unnweyth, war Fieldha TextInputkehevelys war Label a re an hanow hedhesys.

Gwiriys 2026-08-29: kynsa towl a nesas darn dyvers Label a-berth Field, hag a dhyskwedhas dew lavell (unn gwag) drefen Field seulajys a dhyskwedh y honan dhiworth an Label parametrow — kefys dre hwithra fenten an darn; Form nyns eus gans Label parametrow y honan, rag henna devnydh kynsa towl a <Form> o amendys dre y asa yn le a ynventya perthynas na eus. An fordh furv-kestava kesstrewys yw an keth patrom, previys gans e2e ha axe gwir.

Hwithrewgh dha oberenn: kerdhewgh an app ha'n furv a hevel plen — yn ewn herwydh bryntyans: an stylyans yw hwath a-rag. Gwaskewgh Tab: fokus a wayn dres pub kontroll, an lavell yw displetys, ha'n danvon a ober. An hwedhel yw gwrys; an semlant yw dhiso ha henna yw nessa.

Kamm 4 — Stylyewgh

Stylyewgh an krogow klass — .button, .text-input, .label, .field — yn app.css, po kevrewgh tebel parys yn App.razor / index.html:

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

Kamm 5 — Gwelewgh pubtra ow ’oberi

An App ensampel Blazor Web a dhyskwedh an rolyans kowl stylys ha displetys, gans previow Playwright e2e:

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

Kammow nessa

Tebelyow — chanj y'n termyn-dyrghas gans an gweresor Blazor theme-picker (lyverva klass Razor war NuGet).
Gweresoryon dewisyow — yeth ha myns an skrif.
Rolyans darnow — perthynasow, ARIA, ha klavyer dre bub darn.

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.