Lily Design System™

Blazor apmācība

Razor klašu bibliotēkas komponentes ar parametriem, ChildContent attēlošanas fragmenti, atribūtu izklāšana un viens bUnit tests katrai komponentei.

Ko jūs izveidosiet

Neliela kontaktu veidlapa — lauks ar iezīmi, iesniegšanas poga, @bind-Value saistīšana, īsta tastatūras un ekrāna lasītāja darbība — vispirms kaila, tad noformēta, apmēram 10 minūtēs.

Pirms sākat

Nepieciešams git un .NET SDK 8 vai jaunāks. Der jebkurš Blazor projekts — Blazor Web App, Server vai WebAssembly.

1. solis — Iegūstiet kodu

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

Komponentes atrodas direktorijā src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — katra vienā Razor failā. Atsaucieties uz projektu (vai kopējiet failus) no savas Blazor lietotnes un pievienojiet @using LilyBlazorHeadless.Components failam _Imports.razor.

2. solis — Jūsu pirmā komponente

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

Attēlo <button class="button">. Kopīgās parametru konvencijas: Label ( aria-label lai pārrakstītu), CssClass (tiek pievienots pamata āķim), ChildContentun [Parameter(CaptureUnmatchedValues = true)] atribūtu izklāšana, lai jebkurš papildu HTML atribūts tiktu cauri.

3. solis — Salieciet nelielu veidlapu

<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 pieņem redzamo Label kā savu parametru, nevis iekļautu iezīmes komponenti — nododiet to vienreiz, pie Fieldun TextInputno Label nodrošina pieejamo nosaukumu.

Pārbaudīts 2026-08-29: agrāks melnraksts iekļāva atsevišķu Label komponenti iekšā Field, kas attēloja divas iezīmes (vienu tukšu), jo Field jau pati attēlo savu no Label parametrs — atklāts, pārbaudot komponentes pirmkodu; Form pašam nav Label parametra, tāpēc agrākā melnraksta <Form> lietojums tika izlabots, to izlaižot, nevis izdomājot neesošu atribūtu. Salikto kontaktu veidlapas maršrutu ir tas pats modelis, pārbaudīts ar īstiem e2e un axe testiem.

Pārbaudiet savu darbu: palaidiet lietotni, un veidlapa izskatās kaila — tieši kā paredzēts: noformēšana vēl priekšā. Nospiediet Tab: fokuss iet cauri katrai vadīklai, iezīme tiek paziņota, un iesniegšana darbojas. Uzvedība ir gatava; izskats ir jūsu un ir nākamais solis.

4. solis — Noformējiet to

Noformējiet klases āķus — .button, .text-input, .label, .field — failā app.cssvai saistiet gatavu motīvu failā App.razor / index.html: 

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

5. solis — Redziet, kā viss darbojas

Blazor Web paraugu lietotne rāda pilnu katalogu noformētu un demonstrētu, ar Playwright e2e testiem: 

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ākamie soļi

  • Motīvi — pārslēgšana izpildes laikā ar Blazor palīgu theme-picker (Razor klašu bibliotēka NuGet).
  • Preferenču palīgi — valoda un teksta izmērs.
  • Komponenšu katalogs — īpašības, ARIA un tastatūra katrai komponentei.

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.