Tutorial Blazor — Lily Design System

Cosa costruirai

Un piccolo modulo di contatto — campo con etichetta, pulsante di invio, @bind-Value binding, comportamento reale di tastiera e screen reader — prima spoglio, poi stilizzato, in circa 10 minuti.

Prima di iniziare

Servono git e .NET SDK 8 o successivo. Va bene qualsiasi progetto Blazor — Blazor Web App, Server o WebAssembly.

Passo 1 — Ottieni il codice

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

I componenti si trovano in src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — un file Razor ciascuno. Fai riferimento al progetto (o copia i file) dalla tua app Blazor e aggiungi @using LilyBlazorHeadless.Components a _Imports.razor.

Passo 2 — Il tuo primo componente

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

Rende <button class="button">. Le convenzioni dei parametri condivise: Label (un aria-label per sostituire), CssClass (aggiunto all'hook di base), ChildContente [Parameter(CaptureUnmatchedValues = true)] attribute splatting, così qualsiasi attributo HTML in più passa attraverso.

Passo 3 — Componi un piccolo modulo

<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 riceve l' Label visibile come proprio parametro invece di un componente etichetta annidato — passalo una sola volta, su Fielde TextInputcorrispondente Label fornisce il nome accessibile.

Verificato il 2026-08-29: una bozza precedente annidava un componente Label separato dentro Field, che rendeva due etichette (una vuota) perché Field rende già la propria dall'input Label parametro — individuato controllando il sorgente del componente; Form non ha un parametro Label , quindi l'uso di <Form> della bozza precedente è stato corretto omettendolo, invece di inventare un attributo inesistente. La rotta composta del modulo di contatto è lo stesso schema, collaudato da veri test e2e e axe.

Controlla il lavoro: avvia l'app e il modulo appare spoglio — esattamente come previsto: lo stile deve ancora venire. Premi Tab: il focus si sposta su ogni controllo, l'etichetta viene annunciata e l'invio funziona. Il comportamento è fatto; l'aspetto è tuo, ed è il prossimo passo.

Passo 4 — Dagli uno stile

Stilizza gli hook di classe — .button, .text-input, .label, .field — in app.css, oppure collega un tema pronto in App.razor / index.html:

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

Passo 5 — Guarda tutto in funzione

App di esempio Blazor Web mostra il catalogo completo stilizzato e dimostrato, con test 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

Prossimi passi

Temi — cambio a runtime con l'helper theme-picker per Blazor (una libreria di classi Razor su NuGet).
Helper delle preferenze — lingua e dimensione del testo.
Catalogo dei componenti — proprietà, ARIA e tastiera per ogni componente.

Domande lungo la strada? La pagina di aiuto è piena di risposte — e se un passo può essere più chiaro, faccelo sapere e miglioreremo volentieri il tutorial.