Tutorial de Blazor — Lily Design System

Qué vas a construir

Un pequeño formulario de contacto: campo con etiqueta, botón de envío, @bind-Value enlace, comportamiento real de teclado y lector de pantalla; primero desnudo, luego con estilo, en unos 10 minutos.

Antes de empezar

Necesitas git y el SDK de .NET 8 o posterior. Sirve cualquier proyecto de Blazor: Blazor Web App, Server o WebAssembly.

Paso 1: Obtén el 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

Los componentes viven en src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor ; un archivo Razor cada uno. Haz referencia al proyecto (o copia los archivos) desde tu aplicación Blazor y añade @using LilyBlazorHeadless.Components a _Imports.razor.

Paso 2: Tu primer componente

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

Renderiza <button class="button">. Las convenciones de parámetros compartidas: Label (un aria-label para anular), CssClass (se añade al gancho base), ChildContenty [Parameter(CaptureUnmatchedValues = true)] esparcido de atributos para que cualquier atributo HTML adicional pase.

Paso 3: Compón un formulario pequeño

<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 toma el Label visible como su propio parámetro en lugar de un componente de etiqueta anidado: pásalo una vez, en Fieldy TextInputcorrespondiente de Label aporta el nombre accesible.

Verificado el 2026-08-29: un borrador anterior anidaba un componente Label aparte dentro de Field, lo que renderizaba dos etiquetas (una vacía) porque Field ya renderiza la suya propia a partir de la entrada Label parámetro; se detectó revisando el código fuente del componente; Form no tiene Label parámetro propio, <Form> así que el uso de ese parámetro en el borrador anterior se corrigió omitiéndolo en lugar de inventar un atributo que no existe. La ruta compuesta del formulario de contacto es el mismo patrón, ejercitado con pruebas e2e y axe reales.

Comprueba tu trabajo: ejecuta la aplicación y el formulario se ve sencillo, tal como se pretendía: el estilo aún está por venir. Pulsa Tab: el foco recorre cada control, se anuncia la etiqueta y el envío funciona. El comportamiento está hecho; el aspecto es tuyo y es el siguiente paso.

Paso 4: Dale estilo

Da estilo a los ganchos de clase: .button, .text-input, .label, .field , en app.css, o enlaza un tema ya hecho en App.razor / index.html:

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

Paso 5: Míralo todo funcionando

La aplicación de ejemplo Blazor Web muestra el catálogo completo con estilo y demostrado, con pruebas e2e de 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

Próximos pasos

Temas : cambio en tiempo de ejecución con el asistente theme-picker de Blazor (una biblioteca de clases Razor en NuGet).
Asistentes de preferencias : idioma y tamaño del texto.
Catálogo de componentes : propiedades, ARIA y teclado por componente.

¿Dudas por el camino? La página de ayuda está llena de respuestas, y si algún paso puede ser más claro, cuéntanoslo y con gusto mejoraremos el tutorial.