Lily Design System™

Blazor eğitimi

Parametreli Razor sınıf kitaplığı bileşenleri, ChildContent render fragment'lar, öznitelik dağıtımı ve bileşen başına bir bUnit testi.

Ne oluşturacaksınız

Küçük bir iletişim formu — etiketli girdi, gönder düğmesi, @bind-Value bağlama, gerçek klavye ve ekran okuyucu davranışı — önce çıplak, sonra biçimlendirilmiş olarak, yaklaşık 10 dakikada.

Başlamadan önce

git ve .NET SDK 8 veya üstü gerekir. Herhangi bir Blazor projesi olur — Blazor Web App, Server veya WebAssembly.

Adım 1 — Kodu edinin

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

Bileşenler şurada bulunur: src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — her biri tek bir Razor dosyası. Blazor uygulamanızdan projeye başvurun (veya dosyaları kopyalayın) ve şunu ekleyin: @using LilyBlazorHeadless.Components şuraya: _Imports.razor.

Adım 2 — İlk bileşeniniz

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

Şunu işler: <button class="button">. Ortak parametre kuralları: Label ( aria-label geçersiz kılmak), CssClass (temel kancaya eklenir), ChildContentve [Parameter(CaptureUnmatchedValues = true)] öznitelik dağıtımı sayesinde fazladan her HTML özniteliği geçirilir.

Adım 3 — Küçük bir form oluşturun

<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 görünür Label değerini iç içe bir etiket bileşeni yerine kendi parametresi olarak alır — bir kez geçirin, Fieldve TextInputile eşleşen Label erişilebilir adı sağlar.

2026-08-29'da doğrulandı: önceki bir taslak Label içine ayrı bir Fieldbileşeni yerleştirmişti; bu da iki etiket (biri boş) işlenmesine yol açtı, çünkü Field kendi etiketini zaten Label parametresi — bileşen kaynağı kontrol edilerek yakalandı; Form kendisinde Label parametresi yoktur, bu yüzden önceki taslaktaki <Form> kullanımı, var olmayan bir öznitelik uydurmak yerine onsuz olacak şekilde düzeltildi. Bileşik iletişim formu rotası aynı kalıptır ve gerçek e2e ve axe testleriyle sınanır.

Çalışmanızı kontrol edin: uygulamayı çalıştırın; form sade görünür — tam olarak amaçlandığı gibi: biçimlendirme henüz ileride. Şuna basın: Tab: odak her denetimde ilerler, etiket duyurulur ve gönderme çalışır. Davranış tamam; görünüm sizin ve sıradaki adım.

Adım 4 — Biçimlendirin

Sınıf kancalarını biçimlendirin — .button, .text-input, .label, .field — şurada: app.css, ya da hazır bir temayı şurada bağlayın: App.razor / index.html: 

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

Adım 5 — Hepsinin çalıştığını görün

Blazor Web örnek uygulaması tüm kataloğu biçimli ve demolu olarak, Playwright e2e testleriyle birlikte gösterir: 

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

Sonraki adımlar

  • Temalar — Blazor theme-picker yardımcısıyla çalışma anında geçiş (NuGet üzerinde bir Razor sınıf kitaplığı).
  • Tercih yardımcıları — dil ve metin boyutu.
  • Bileşen kataloğu — bileşen başına özellikler, ARIA ve klavye.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.