Teagasc Blazor — Lily Design System

An rud a thógfaidh tú

Foirm theagmhála bheag — réimse le lipéad, cnaipe cur isteach, @bind-Value ceangal, fíor-iompar méarchláir agus léitheora scáileáin — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá git agus .NET SDK 8 nó níos nuaí ag teastáil uait. Oibríonn aon tionscadal Blazor — Blazor Web App, Server nó WebAssembly.

Céim 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

Tá na comhpháirteanna i src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — comhad Razor amháin an ceann. Tagair don tionscadal (nó cóipeáil na comhaid) ó d'app Blazor agus cuir @using LilyBlazorHeadless.Components le _Imports.razor.

Céim 2 — Do chéad chomhpháirt

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

Rindreálann <button class="button">. Na gnáthaimh paraiméadar roinnte: Label ( aria-label chun sárú), CssClass (cuirtear leis an gcrúca bunúsach), ChildContentagus [Parameter(CaptureUnmatchedValues = true)] scaipeadh aitreabúidí ionas go rachaidh aon aitreabúid HTML breise tríd.

Céim 3 — Cuir foirm bheag le 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 glacann sé leis an Label infheicthe mar pharaiméadar dá chuid féin in ionad comhpháirt lipéid neadaithe — pas é uair amháin, ar Fieldagus TextInputcomhfhreagrach ó Label soláthraíonn an t-ainm inrochtana.

Fíoraithe 2026-08-29: chuir dréacht roimhe sin comhpháirt Label ar leith taobh istigh de Field, rud a rindreáil dhá lipéad (ceann amháin folamh) mar go rindreálann Field a cheann féin cheana ón ionchur Label paraiméadar — faighte trí chód foinse na comhpháirte a sheiceáil; Form níl Label paraiméadar ag <Form> féin, mar sin ceartaíodh úsáid an dréachta roimhe sin trína fhágáil ar lár in ionad aitreabúid nach bhfuil ann a chumadh. An bealach comhshuite foirm teagmhála an patrún céanna, tástáilte le fíor-thástálacha e2e agus axe.

Seiceáil d'obair: rith an app agus tá an fhoirm le feiceáil nocht — go díreach mar a bhí beartaithe: tá an stíliú fós le teacht. Brúigh Tab: gluaiseann an fócas trí gach rialú, fógraítear an lipéad agus oibríonn an cur isteach. Tá an t-iompar déanta; is leatsa an cuma agus is é an chéad chéim eile é.

Céim 4 — Stíligh é

Stíligh na crúcaí aicme — .button, .text-input, .label, .field — in app.css, nó nasc téama réamhdhéanta in App.razor / index.html:

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

Céim 5 — Féach air ag obair ar fad

App samplach Blazor Web taispeánann sé an catalóg iomlán stíl-chóirithe agus léirithe, le tástálacha e2e Playwright:

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 chéad chéimeanna eile

Téamaí — malartú ag am rite leis an gcúntóir theme-picker do Blazor (leabharlann aicme Razor ar NuGet).
Cúntóirí sainroghanna — teanga agus méid téacs.
Catalóg na gcomhpháirteanna — airíonna, ARIA agus méarchlár in aghaidh na comhpháirte.

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.