Tutorial Blazor — Lily Design System

Apa yang akan anda bina

Borang hubungan kecil — input berlabel, butang hantar, @bind-Value pengikatan, tingkah laku papan kekunci dan pembaca skrin yang sebenar — mula-mula kosong, kemudian digayakan, dalam kira-kira 10 minit.

Sebelum anda bermula

Anda memerlukan git dan .NET SDK 8 atau lebih baharu. Mana-mana projek Blazor boleh digunakan — Blazor Web App, Server atau WebAssembly.

Langkah 1 — Dapatkan 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

Komponen terletak dalam src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — satu fail Razor setiap satu. Rujuk projek (atau salin fail) daripada aplikasi Blazor anda dan tambah @using LilyBlazorHeadless.Components ke _Imports.razor.

Langkah 2 — Komponen pertama anda

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

Memaparkan <button class="button">. Konvensyen parameter yang dikongsi: Label ( aria-label penggantian), CssClass (ditambah pada cangkuk asas), ChildContent, dan [Parameter(CaptureUnmatchedValues = true)] penaburan atribut supaya sebarang atribut HTML tambahan diteruskan.

Langkah 3 — Gubah borang kecil

<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 mengambil Label kelihatan sebagai parameternya sendiri dan bukannya komponen label bersarang — hantar sekali, pada Field, dan TextInputyang sepadan pada Label membekalkan nama boleh diakses.

Disahkan 2026-08-29: draf awal menyarangkan komponen Label berasingan di dalam Field, yang memaparkan dua label (satu kosong) kerana Field sudah memaparkan labelnya sendiri daripada Label parameter — dikesan dengan menyemak sumber komponen; Form tidak mempunyai Label parameter sendiri, jadi penggunaan <Form> dalam draf awal dibetulkan dengan membuangnya dan bukannya mereka atribut yang tidak wujud. Yang laluan borang hubungan gubahan ialah corak yang sama, diuji dengan e2e dan ujian axe sebenar.

Semak kerja anda: jalankan aplikasi dan borang kelihatan biasa sahaja — tepat seperti dimaksudkan: penggayaan masih di hadapan. Tekan Tab: fokus bergerak melalui setiap kawalan, label diumumkan dan penghantaran berfungsi. Tingkah laku sudah siap; rupanya milik anda dan itu seterusnya.

Langkah 4 — Gayakan

Gayakan cangkuk kelas — .button, .text-input, .label, .field — dalam app.css, atau pautkan tema siap pakai dalam App.razor / index.html:

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

Langkah 5 — Lihat semuanya berfungsi

Aplikasi contoh Blazor Web menunjukkan katalog penuh yang digayakan dan didemonstrasikan, dengan ujian 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

Langkah seterusnya

Tema — penukaran runtime dengan pembantu Blazor theme-picker (pustaka kelas Razor di NuGet).
Pembantu keutamaan — bahasa dan saiz teks.
Katalog komponen — prop, ARIA dan papan kekunci bagi setiap komponen.

Ada soalan di sepanjang jalan? halaman bantuan penuh dengan jawapan — dan jika sesuatu langkah boleh dijelaskan lagi, beritahu kami dan kami dengan senang hati akan memperbaiki tutorial.