Tutoriel Blazor — Lily Design System

Ce que vous allez construire

Un petit formulaire de contact — champ avec étiquette, bouton d'envoi, @bind-Value liaison, vrai comportement clavier et lecteur d'écran — d'abord nu, puis stylé, en 10 minutes environ.

Avant de commencer

Il vous faut git et le SDK .NET 8 ou plus récent. Tout projet Blazor convient — Blazor Web App, Server ou WebAssembly.

Étape 1 — Récupérer le code

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

Les composants se trouvent dans src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — un fichier Razor chacun. Référencez le projet (ou copiez les fichiers) depuis votre application Blazor et ajoutez @using LilyBlazorHeadless.Components à _Imports.razor.

Étape 2 — Votre premier composant

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

Rend <button class="button">. Les conventions de paramètres communes : Label (un aria-label pour remplacer), CssClass (ajouté au crochet de base), ChildContentet [Parameter(CaptureUnmatchedValues = true)] répartition d'attributs pour que tout attribut HTML supplémentaire passe.

Étape 3 — Composer un petit formulaire

<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 prend le Label visible comme son propre paramètre plutôt qu'un composant d'étiquette imbriqué — transmettez-le une fois, sur Fieldet TextInputcorrespondant de Label fournit le nom accessible.

Vérifié le 2026-08-29 : un brouillon précédent imbriquait un composant Label distinct dans Field, ce qui rendait deux étiquettes (une vide) parce que Field rend déjà la sienne à partir de l'entrée Label paramètre — découvert en vérifiant le code source du composant ; Form n'a pas lui-même de Label paramètre <Form> , donc l'usage du brouillon précédent a été corrigé en l'omettant plutôt qu'en inventant un attribut qui n'existe pas. La route composée du formulaire de contact suit le même motif, éprouvé par de vrais tests e2e et axe.

Vérifiez votre travail : lancez l'application et le formulaire paraît nu — exactement comme prévu : le style reste à venir. Appuyez sur Tab: le focus traverse chaque contrôle, l'étiquette est annoncée et l'envoi fonctionne. Le comportement est fait ; l'apparence est la vôtre et c'est l'étape suivante.

Étape 4 — Le styler

Stylez les crochets de classe — .button, .text-input, .label, .field — dans app.css, ou liez un thème prêt à l'emploi dans App.razor / index.html:

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

Étape 5 — Voir le tout fonctionner

L'application d'exemple Blazor Web montre le catalogue complet stylé et démontré, avec des tests 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

Étapes suivantes

Thèmes — changement à l'exécution avec l'assistant theme-picker de Blazor (une bibliothèque de classes Razor sur NuGet).
Assistants de préférences — langue et taille du texte.
Catalogue de composants — propriétés, ARIA et clavier par composant.

Des questions en chemin ? La page d'aide regorge de réponses — et si une étape peut être plus claire, dites-le-nous et nous améliorerons volontiers le tutoriel.