Tutorial Blazor — Lily Design System

Apa yang akan Anda bangun

Formulir kontak kecil — kolom berlabel, tombol kirim, @bind-Value pengikatan, perilaku papan ketik dan pembaca layar yang nyata — pertama polos, lalu bergaya, dalam sekitar 10 menit.

Sebelum memulai

Anda memerlukan git dan .NET SDK 8 atau lebih baru. Proyek Blazor mana pun bisa — Blazor Web App, Server, atau WebAssembly.

Langkah 1 — Dapatkan kodenya

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 berada di src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — satu berkas Razor masing-masing. Rujuk proyek (atau salin berkas) dari aplikasi Blazor Anda dan tambahkan @using LilyBlazorHeadless.Components ke _Imports.razor.

Langkah 2 — Komponen pertama Anda

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

Merender <button class="button">. Konvensi parameter bersama: Label (sebuah aria-label untuk menimpa), CssClass (ditambahkan ke kait dasar), ChildContentdan [Parameter(CaptureUnmatchedValues = true)] penyebaran atribut sehingga atribut HTML tambahan apa pun diteruskan.

Langkah 3 — Susun formulir 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 menerima Label yang terlihat sebagai parameternya sendiri, bukan komponen label bersarang — teruskan sekali, pada Fielddan TextInputyang cocok dari Label memberikan nama yang dapat diakses.

Diverifikasi 2026-08-29: draf sebelumnya menyarangkan komponen Label terpisah di dalam Field, yang merender dua label (satu kosong) karena Field sudah merender labelnya sendiri dari input Label parameter — ditemukan dengan memeriksa kode sumber komponen; Form sendiri tidak memiliki Label parameter, jadi penggunaan <Form> pada draf sebelumnya diperbaiki dengan menghilangkannya, alih-alih mengarang atribut yang tidak ada. Rute formulir kontak gabungan adalah pola yang sama, diuji dengan pengujian e2e dan axe yang nyata.

Periksa pekerjaan Anda: jalankan aplikasi dan formulir tampak polos — persis seperti yang dimaksudkan: penataan gaya masih akan datang. Tekan Tab: fokus berpindah melalui setiap kontrol, label diumumkan, dan pengiriman berfungsi. Perilakunya selesai; tampilan adalah milik Anda dan menjadi langkah berikutnya.

Langkah 4 — Beri gaya

Beri gaya pada kait kelas — .button, .text-input, .label, .field — di app.css, atau tautkan tema siap pakai di App.razor / index.html:

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

Langkah 5 — Lihat semuanya bekerja

Aplikasi contoh Blazor Web menampilkan katalog lengkap yang bergaya dan didemonstrasikan, dengan pengujian 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 berikutnya

Tema — pengalihan saat berjalan dengan pembantu theme-picker Blazor (pustaka kelas Razor di NuGet).
Pembantu preferensi — bahasa dan ukuran teks.
Katalog komponen — properti, ARIA, dan papan ketik per komponen.

Ada pertanyaan di tengah jalan? Halaman bantuan penuh jawaban — dan jika suatu langkah bisa lebih jelas, beri tahu kami dan kami dengan senang hati akan memperbaiki tutorial ini.