Lily Design System™

Blazor-opas

Razor-luokkakirjaston komponentit parametreilla, ChildContent renderöintilohkot, attribuuttien levitys ja yksi bUnit-testi komponenttia kohden.

Mitä rakennat

Pieni yhteydenottolomake — nimiöity kenttä, lähetyspainike, @bind-Value -sidonta, aito näppäimistö- ja ruudunlukijakäyttäytyminen — ensin paljaana, sitten tyylitellen, noin 10 minuutissa.

Ennen kuin aloitat

Tarvitset gitin ja .NET SDK 8:n tai uudemman. Mikä tahansa Blazor-projekti kelpaa — Blazor Web App, Server tai WebAssembly.

Vaihe 1 — Hae koodi

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

Komponentit sijaitsevat hakemistossa src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — yksi Razor-tiedosto kutakin. Viittaa projektiin (tai kopioi tiedostot) Blazor-sovelluksestasi ja lisää @using LilyBlazorHeadless.Components tiedostoon _Imports.razor.

Vaihe 2 — Ensimmäinen komponenttisi

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

Renderöi <button class="button">. Yhteiset parametrisopimukset: Label ( aria-label ohittamiseen), CssClass (lisätään peruskoukkuun), ChildContentja [Parameter(CaptureUnmatchedValues = true)] attribuuttien levitys, jotta mikä tahansa ylimääräinen HTML-attribuutti välittyy läpi.

Vaihe 3 — Kokoa pieni lomake

<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 ottaa näkyvän Label omana parametrinaan sisäkkäisen nimiökomponentin sijaan — välitä se kerran elementille Fieldja TextInputelementistä Label antaa saavutettavan nimen.

Varmistettu 2026-08-29: aiempi luonnos sijoitti erillisen Label -komponentin elementin Fieldsisään, mikä renderöi kaksi nimiötä (toinen tyhjä), koska Field renderöi jo oman nimiönsä Label -parametri — havaittu tarkistamalla komponentin lähdekoodi; Form ei itse sisällä Label -parametria, joten aiemman luonnoksen <Form> -käyttö korjattiin jättämään se pois sen sijaan, että olisi keksitty olematon attribuutti. Koottu yhteydenottolomakkeen reitti on sama malli, jota on koeteltu oikeilla e2e- ja axe-testeillä.

Tarkista työsi: käynnistä sovellus, ja lomake näyttää paljaalta — juuri niin kuin on tarkoitus: tyylittely on vielä edessä. Paina Tab: kohdistus liikkuu jokaisen ohjaimen läpi, nimiö ilmoitetaan ja lähettäminen toimii. Toiminta on valmis; ulkoasu on sinun ja seuraava vaihe.

Vaihe 4 — Tyylittele se

Tyylittele luokkakoukut — .button, .text-input, .label, .field — tiedostossa app.css, tai linkitä valmis teema tiedostossa App.razor / index.html: 

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

Vaihe 5 — Katso kaiken toimivan

Blazor Web -esimerkkisovellus näyttää koko luettelon tyyliteltynä ja esiteltynä, Playwright e2e -testeineen: 

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

Seuraavat askeleet

  • Teemat — vaihto ajon aikana Blazorin theme-picker-apuvälineellä (Razor-luokkakirjasto NuGetissä).
  • Asetusapuvälineet — kieli ja tekstikoko.
  • Komponenttiluettelo — ominaisuudet, ARIA ja näppäimistö komponenteittain.

Kysymyksiä matkan varrella? Ohjesivu on täynnä vastauksia — ja jos jokin vaihe voisi olla selkeämpi, kerro meille ja parannamme opasta mielellämme.