Lily Design System™

Blazor-Tutorial

Komponenten einer Razor-Klassenbibliothek mit Parametern, ChildContent Render-Fragmenten, Attribute-Splatting und einem bUnit-Test pro Komponente.

Was du baust

Ein kleines Kontaktformular — beschriftetes Eingabefeld, Absenden-Schaltfläche, @bind-Value -Bindung, echtes Tastatur- und Screenreader-Verhalten — zuerst nackt, dann gestaltet, in etwa 10 Minuten.

Bevor du anfängst

Du brauchst git und das .NET SDK 8 oder neuer. Jedes Blazor-Projekt funktioniert — Blazor Web App, Server oder WebAssembly.

Schritt 1 — Den Code holen

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

Die Komponenten liegen in src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — je eine Razor-Datei. Referenziere das Projekt (oder kopiere die Dateien) aus deiner Blazor-App und füge @using LilyBlazorHeadless.Components zu _Imports.razor.

Schritt 2 — Deine erste Komponente

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

Rendert <button class="button">. Die gemeinsamen Parameterkonventionen: Label (ein aria-label zum Überschreiben), CssClass (wird an den Basis-Hook angehängt), ChildContentund [Parameter(CaptureUnmatchedValues = true)] Attribute-Splatting, sodass jedes zusätzliche HTML-Attribut durchgereicht wird.

Schritt 3 — Ein kleines Formular zusammensetzen

<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 nimmt das sichtbare Label als eigenen Parameter entgegen statt als verschachtelte Label-Komponente — gib es einmal an, bei Fieldund TextInputvon Label liefert den zugänglichen Namen.

Geprüft am 2026-08-29: ein früherer Entwurf verschachtelte eine separate Label -Komponente in Field, was zwei Labels (eines leer) rendert, weil Field bereits ein eigenes aus dem Label -Parameter — durch Prüfen des Komponenten-Quellcodes entdeckt; Form selbst hat keinen Label -Parameter, daher wurde die <Form> -Verwendung des früheren Entwurfs korrigiert und ohne sie belassen, statt ein nicht existierendes Attribut zu erfinden. Die zusammengesetzte Kontaktformular-Route ist dasselbe Muster, getestet mit echten e2e- und axe-Tests.

Prüfe deine Arbeit: Starte die App, und das Formular sieht schlicht aus — genau wie beabsichtigt: Die Gestaltung kommt noch. Drücke Tab: Der Fokus wandert durch jedes Bedienelement, das Label wird angesagt und das Absenden funktioniert. Das Verhalten ist fertig; das Aussehen gehört dir und kommt als Nächstes.

Schritt 4 — Gestalten

Gestalte die Klassen-Hooks — .button, .text-input, .label, .field — in app.css, oder binde ein fertiges Theme ein in App.razor / index.html: 

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

Schritt 5 — Alles in Aktion sehen

Blazor-Web-Beispiel-App zeigt den vollständigen Katalog gestaltet und demonstriert, mit Playwright-e2e-Tests: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples

Nächste Schritte

  • Theming — Umschalten zur Laufzeit mit dem Blazor-Helper theme-picker (eine Razor-Klassenbibliothek auf NuGet).
  • Einstellungs-Helper — Sprache und Textgröße.
  • Komponentenkatalog — Props, ARIA und Tastatur pro Komponente.

Fragen unterwegs? Die Hilfeseite steckt voller Antworten — und wenn ein Schritt klarer sein könnte, sag es uns und wir verbessern das Tutorial gern.