Ръководство за Blazor

Какво ще изградите

Малка форма за контакт — поле с етикет, бутон за изпращане, @bind-Value свързване, истинско поведение на клавиатурата и екранния четец — първо гола, после стилизирана, за около 10 минути.

Преди да започнете

Нужни са ви git и .NET SDK 8 или по-нов. Подходящ е всеки проект на Blazor — Blazor Web App, Server или WebAssembly.

Стъпка 1 — Вземете кода

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

Компонентите се намират в src/LilyBlazorHeadless/Components/ — Button.razor, TextInput.razor — по един Razor файл всеки. Препратете към проекта (или копирайте файловете) от вашето Blazor приложение и добавете @using LilyBlazorHeadless.Components към _Imports.razor.

Стъпка 2 — Първият ви компонент

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

Рендира <button class="button">. Общите конвенции за параметри: Label ( aria-label за презаписване), CssClass (добавя се към базовата кука), ChildContentи [Parameter(CaptureUnmatchedValues = true)] разпръскване на атрибути, така че всеки допълнителен HTML атрибут да мине през компонента.

Стъпка 3 — Съставете малка форма

<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 приема видимия Label като свой собствен параметър вместо вложен компонент за етикет — подайте го веднъж, на Fieldи TextInputот Label осигурява достъпното име.

Проверено на 2026-08-29: по-ранна чернова влагаше отделен компонент Label вътре в Field, което рендираше два етикета (единият празен), защото Field вече рендира собствения си от входа Label параметър — открито чрез проверка на изходния код на компонента; Form самият той няма параметър Label , затова употребата на <Form> в по-ранната чернова беше поправена да го пропуска, вместо да се измисля несъществуващ атрибут. Съставният маршрут на формата за контакт е същият модел, изпитан с истински e2e и axe тестове.

Проверете работата си: стартирайте приложението и формата изглежда гола — точно както е предвидено: стилизирането предстои. Натиснете Tab: фокусът минава през всеки контрол, етикетът се обявява и изпращането работи. Поведението е готово; външният вид е ваш и е следващата стъпка.

Стъпка 4 — Стилизирайте го

Стилизирайте класовите куки — .button, .text-input, .label, .field — в app.css, или свържете готова тема в App.razor / index.html:

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

Стъпка 5 — Вижте всичко в действие

Примерното приложение Blazor Web показва пълния каталог стилизиран и демонстриран, с 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

Следващи стъпки

Теми — превключване по време на изпълнение с помощника theme-picker за Blazor (библиотека с Razor класове в NuGet).
Помощници за предпочитания — език и размер на текста.
Каталог на компонентите — свойства, ARIA и клавиатура за всеки компонент.

Въпроси по пътя? Страницата за помощ е пълна с отговори — а ако някоя стъпка може да е по-ясна, кажете ни и с радост ще подобрим ръководството.