Lily Design System™

Tiwtorial Blazor

Cydrannau llyfrgell dosbarthiadau Razor gyda pharamedrau, ChildContent darnau rendro, lledaenu priodoleddau a phrawf bUnit fesul cydran.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach — maes â label, botwm cyflwyno, @bind-Value rhwymo, ymddygiad bysellfwrdd a darllenydd sgrin go iawn — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen git a'r .NET SDK 8 neu'n hwyrach. Mae unrhyw brosiect Blazor yn gweithio — Blazor Web App, Server neu WebAssembly.

Cam 1 — Cael y cod

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

Mae'r cydrannau'n byw yn src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — un ffeil Razor yr un. Cyfeiriwch at y prosiect (neu copïwch y ffeiliau) o'ch ap Blazor ac ychwanegwch @using LilyBlazorHeadless.Components at _Imports.razor.

Cam 2 — Eich cydran gyntaf

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

Yn dangos <button class="button">. Y confensiynau paramedr a rennir: Label ( aria-label i'w ddiystyru), CssClass (wedi'i atodi at y bachyn sylfaenol), ChildContenta [Parameter(CaptureUnmatchedValues = true)] lledaenu priodoleddau fel bod unrhyw briodoledd HTML ychwanegol yn mynd drwodd.

Cam 3 — Cyfansoddi ffurflen fach

<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 yn cymryd y Label gweladwy fel ei baramedr ei hun yn lle cydran label nythedig — pasiwch ef unwaith, ar Fielda TextInputcyfatebol o Label yn darparu'r enw hygyrch.

Gwiriwyd 2026-08-29: roedd drafft cynharach yn nythu cydran Label ar wahân y tu mewn i Field, a oedd yn dangos dau label (un yn wag) oherwydd bod Field eisoes yn dangos ei un ei hun o'r mewnbwn Label paramedr — darganfuwyd drwy wirio cod ffynhonnell y gydran; Form nid oes gan Label baramedr <Form> ei hun, felly cywirwyd defnydd y drafft cynharach drwy ei hepgor, yn hytrach na dyfeisio priodoledd nad yw'n bodoli. Y llwybr ffurflen gyswllt cyfansawdd yw'r un patrwm, wedi'i brofi gyda phrofion e2e ac axe go iawn.

Gwiriwch eich gwaith: rhedwch yr ap ac mae'r ffurflen yn edrych yn noeth — yn union fel y bwriadwyd: mae'r steilio eto i ddod. Pwyswch Tab: mae ffocws yn symud trwy bob rheolydd, caiff y label ei gyhoeddi ac mae cyflwyno'n gweithio. Mae'r ymddygiad wedi'i orffen; eich un chi yw'r olwg a dyma'r cam nesaf.

Cam 4 — Ei steilio

Steiliwch y bachau dosbarth — .button, .text-input, .label, .field — yn app.css, neu cysylltwch thema barod yn App.razor / index.html: 

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

Cam 5 — Ei weld yn gweithio i gyd

Ap enghreifftiol Blazor Web yn dangos y catalog llawn wedi'i steilio a'i ddangos, gyda phrofion 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

Y camau nesaf

  • Themâu — newid yn ystod rhedeg gyda'r cynorthwyydd theme-picker ar gyfer Blazor (llyfrgell dosbarthiadau Razor ar NuGet).
  • Cynorthwywyr dewisiadau — iaith a maint testun.
  • Catalog cydrannau — priodweddau, ARIA a bysellfwrdd ar gyfer pob cydran.

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.