Oideachadh Blazor — Lily Design System

Na thogas tu

Foirm fios-thugainn bheag — in-chur le leubail, putan cur-a-steach, @bind-Value ceangal, giùlan clàr-iuchrach is leughadair-sgrìn fìor — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu git agus an .NET SDK 8 no nas ùire. Obraichidh pròiseact Blazor sam bith — Blazor Web App, Server no WebAssembly.

Ceum 1 — Faigh an còd

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

Tha na co-phàirtean a’ fuireach ann an src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — aon fhaidhle Razor gach fear. Thoir iomradh air a’ phròiseact (no dèan lethbhreac dhe na faidhlichean) bhon tagradh Blazor agad agus cuir @using LilyBlazorHeadless.Components ri _Imports.razor.

Ceum 2 — A’ chiad cho-phàirt agad

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

A’ reandaradh <button class="button">. Na gnàthasan paramadair co-roinnte: Label ( aria-label tar-sgrìobhadh), CssClass (air a chur ris a’ chrochadh bhunaiteach), ChildContent, agus [Parameter(CaptureUnmatchedValues = true)] sgaoileadh bhuadhan gus an tèid buadh HTML a bharrachd seachad.

Ceum 3 — Cuir foirm bheag ri chèile

<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’ gabhail an Label lèirsinneach mar a paramadair fhèin seach co-phàirt leubail neadaichte — thoir seachad e aon turas, air Field, agus TextInputa tha a’ maidseadh Label a’ solarachadh an ainm so-ruigsinneach.

Dearbhte 2026-08-29: bha dreachd na bu thràithe air co-phàirt air leth neadachadh Label a-staigh Field, a’ reandaradh dà leubail (fear falamh) oir bidh Field mu thràth a’ reandaradh a fhir fhèin bhon Label paramadair — chaidh a ghlacadh le sùil air tùs a’ cho-phàirt; Form chan eil Label paramadair aige fhèin, agus mar sin chaidh cleachdadh dreachd na bu thràithe de <Form> a cheartachadh gus fear fhàgail às seach buadh a chruthachadh nach eil ann. An slighe measgaichte foirm fios-thugainn an aon phàtran, air a chleachdadh le deuchainnean e2e is axe fìor.

Dèan cinnteach air d’ obair: ruith an tagradh agus tha an fhoirm a’ coimhead lom — dìreach mar a bha dùil: tha an stoidhle fhathast romhainn. Brùth Tab: bidh am fòcas a’ gluasad tro gach smachd, tha an leubail air ainmeachadh, agus obraichidh cur-a-steach. Tha an giùlan deiseil; is leatsa an coltas, agus is e an ath rud.

Ceum 4 — Cuir stoidhle air

Cuir stoidhle air na crochaidhean clas — .button, .text-input, .label, .field — ann an app.css, no ceangail ùrlar deiseil ann an App.razor / index.html:

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

Ceum 5 — Faic a h-uile càil ag obair

Tha an tagradh eisimpleir Blazor Web a’ sealltainn an catalog slàn le stoidhle is taisbeanadh, le deuchainnean 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

Na ceumannan a leanas

Ùrlaran — atharrachadh aig àm ruith leis a’ chuideachadh theme-picker Blazor (leabharlann-clas Razor air NuGet).
Cuideachaidhean roghainnean — cànan agus meud teacsa.
Catalog cho-phàirtean — props, ARIA, agus clàr-iuchrach airson gach co-phàirt.

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.