Lily Design System™

„Blazor“ vadovas

„Razor“ klasių bibliotekos komponentai su parametrais, ChildContent atvaizdavimo fragmentai, atributų paskleidimas ir vienas bUnit testas kiekvienam komponentui.

Ką sukursite

Nedidelė kontaktų forma — laukas su žyma, siuntimo mygtukas, @bind-Value susiejimas, tikras klaviatūros ir ekrano skaitytuvo elgesys — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia git ir .NET SDK 8 ar naujesnio. Tinka bet kuris „Blazor“ projektas — „Blazor Web App“, „Server“ arba „WebAssembly“.

1 žingsnis — Gaukite kodą

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

Komponentai yra aplanke src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — po vieną „Razor“ bylą. Nurodykite projektą (arba nukopijuokite bylas) iš savo „Blazor“ programos ir pridėkite @using LilyBlazorHeadless.Components į _Imports.razor.

2 žingsnis — Jūsų pirmasis komponentas

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

Atvaizduoja <button class="button">. Bendros parametrų konvencijos: Label ( aria-label norint pakeisti), CssClass (pridedamas prie bazinio kablio), ChildContentir [Parameter(CaptureUnmatchedValues = true)] atributų paskleidimas, kad bet koks papildomas HTML atributas praeitų.

3 žingsnis — Sudėkite nedidelę formą

<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 priima matomą Label kaip savo parametrą vietoj įdėto žymos komponento — perduokite ją vieną kartą, prie Fieldir TextInputiš Label suteikia prieinamą pavadinimą.

Patikrinta 2026-08-29: ankstesnis juodraštis įdėjo atskirą Label komponentą į Field, todėl buvo atvaizduotos dvi žymos (viena tuščia), nes Field jau pats atvaizduoja savo iš Label parametras — pastebėta patikrinus komponento šaltinio kodą; Form pats neturi Label parametro, todėl ankstesnio juodraščio <Form> naudojimas buvo pataisytas jį praleidžiant, užuot sugalvojus neegzistuojantį atributą. Sudėtinis kontaktų formos maršrutas yra tas pats šablonas, išbandytas tikrais e2e ir axe testais.

Patikrinkite savo darbą: paleiskite programą ir forma atrodo plika — kaip ir numatyta: stilius dar laukia. Paspauskite Tab: fokusas pereina per kiekvieną valdiklį, žyma paskelbiama, o siuntimas veikia. Elgesys baigtas; išvaizda jūsų ir yra kitas žingsnis.

4 žingsnis — Apipavidalinkite

Apipavidalinkite klasių kablius — .button, .text-input, .label, .field — faile app.cssarba susiekite paruoštą temą faile App.razor / index.html: 

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

5 žingsnis — Pažiūrėkite, kaip viskas veikia

„Blazor Web“ pavyzdinė programa rodo visą katalogą apipavidalintą ir pademonstruotą, su „Playwright“ e2e testais: 

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

Tolesni žingsniai

  • Temos — perjungimas vykdymo metu su „Blazor“ pagalbininku theme-picker („Razor“ klasių biblioteka NuGet).
  • Nuostatų pagalbininkai — kalba ir teksto dydis.
  • Komponentų katalogas — savybės, ARIA ir klaviatūra kiekvienam komponentui.

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.