Návod pro Blazor — Lily Design System

Co vytvoříte

Malý kontaktní formulář — pole se štítkem, tlačítko odeslat, @bind-Value vazba, skutečné chování klávesnice a čtečky obrazovky — nejprve holý, potom ostylovaný, zhruba za 10 minut.

Než začnete

Potřebujete git a .NET SDK 8 nebo novější. Hodí se jakýkoli projekt Blazor — Blazor Web App, Server nebo WebAssembly.

Krok 1 — Získejte kód

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

Komponenty jsou v src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — každá v jednom souboru Razor. Odkažte na projekt (nebo zkopírujte soubory) ze své aplikace Blazor a přidejte @using LilyBlazorHeadless.Components do _Imports.razor.

Krok 2 — Vaše první komponenta

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

Vykresluje <button class="button">. Společné konvence parametrů: Label ( aria-label k přepsání), CssClass (připojí se k základnímu háčku), ChildContenta [Parameter(CaptureUnmatchedValues = true)] rozprostírání atributů, takže jakýkoli další atribut HTML projde dál.

Krok 3 — Sestavte malý formulář

<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 přijímá viditelný Label jako vlastní parametr místo vnořené komponenty štítku — předejte ho jednou, u Fielda TextInputz Label dodá přístupný název.

Ověřeno 2026-08-29: dřívější koncept vnořoval samostatnou komponentu Label dovnitř Field, což vykreslilo dva štítky (jeden prázdný), protože Field už vykresluje svůj vlastní ze vstupu Label parametr — zjištěno kontrolou zdrojového kódu komponenty; Form samo nemá parametr Label , takže použití <Form> z dřívějšího konceptu bylo opraveno vynecháním, místo aby se vymýšlel neexistující atribut. Složená trasa kontaktního formuláře je stejný vzor, prověřený skutečnými testy e2e a axe.

Zkontrolujte svou práci: spusťte aplikaci a formulář vypadá holě — přesně jak bylo zamýšleno: stylování teprve přijde. Stiskněte Tab: fokus prochází každým ovládacím prvkem, štítek se oznamuje a odeslání funguje. Chování je hotové; vzhled je váš a je další na řadě.

Krok 4 — Ostylujte ho

Ostylujte třídní háčky — .button, .text-input, .label, .field — v app.css, nebo připojte hotové téma v App.razor / index.html:

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

Krok 5 — Podívejte se, jak to celé funguje

Ukázková aplikace Blazor Web ukazuje celý katalog ostylovaný a předvedený, s testy 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

Další kroky

Témata — přepínání za běhu pomocníkem theme-picker pro Blazor (knihovna tříd Razor na NuGetu).
Pomocníci pro předvolby — jazyk a velikost textu.
Katalog komponent — vlastnosti, ARIA a klávesnice pro každou komponentu.

Otázky cestou? Stránka nápovědy je plná odpovědí — a pokud by nějaký krok mohl být jasnější, dejte nám vědět a návod rádi vylepšíme.