Tutorial de Blazor — Lily Design System

O que vai construir

Um pequeno formulário de contacto — campo com etiqueta, botão de envio, @bind-Value ligação, comportamento real de teclado e leitor de ecrã — primeiro simples, depois estilizado, em cerca de 10 minutos.

Antes de começar

Precisa de git e do SDK do .NET 8 ou posterior. Qualquer projeto Blazor serve — Blazor Web App, Server ou WebAssembly.

Passo 1 — Obter o código

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

Os componentes vivem em src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — um ficheiro Razor cada. Referencie o projeto (ou copie os ficheiros) a partir da sua aplicação Blazor e adicione @using LilyBlazorHeadless.Components a _Imports.razor.

Passo 2 — O seu primeiro componente

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

Renderiza <button class="button">. As convenções de parâmetros partilhadas: Label (um aria-label para substituir), CssClass (acrescentado ao gancho base), ChildContente [Parameter(CaptureUnmatchedValues = true)] espalhamento de atributos para que qualquer atributo HTML adicional passe.

Passo 3 — Componha um pequeno formulário

<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 recebe o Label visível como o seu próprio parâmetro em vez de um componente de etiqueta aninhado — passe-o uma vez, em Fielde TextInputcorrespondente de Label fornece o nome acessível.

Verificado em 2026-08-29: um rascunho anterior aninhava um componente Label separado dentro de Field, o que renderizava duas etiquetas (uma vazia) porque Field já renderiza a sua própria a partir da entrada Label parâmetro — descoberto ao verificar o código-fonte do componente; Form não tem Label parâmetro próprio, pelo que <Form> a utilização do rascunho anterior foi corrigida omitindo-o, em vez de inventar um atributo que não existe. A rota composta do formulário de contacto é o mesmo padrão, exercitado com testes e2e e axe reais.

Verifique o seu trabalho: execute a aplicação e o formulário parece simples — exatamente como pretendido: o estilo ainda está por vir. Prima Tab: o foco percorre cada controlo, a etiqueta é anunciada e o envio funciona. O comportamento está feito; o aspeto é seu e é o passo seguinte.

Passo 4 — Estilize-o

Estilize os ganchos de classe — .button, .text-input, .label, .field — em app.css, ou ligue um tema pronto em App.razor / index.html:

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

Passo 5 — Veja tudo a funcionar

A aplicação de exemplo Blazor Web mostra o catálogo completo estilizado e demonstrado, com testes e2e do 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

Passos seguintes

Temas — alternância em tempo de execução com o auxiliar theme-picker do Blazor (uma biblioteca de classes Razor no NuGet).
Auxiliares de preferências — idioma e tamanho do texto.
Catálogo de componentes — propriedades, ARIA e teclado por componente.

Dúvidas pelo caminho? A página de ajuda está cheia de respostas — e se algum passo puder ser mais claro, diga-nos e melhoraremos o tutorial com todo o gosto.