Руководство по 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 и клавиатура для каждого компонента.

Есть вопросы по ходу дела? Страница справки полна ответов — а если какой-то шаг можно сделать яснее, сообщите нам и мы с радостью улучшим руководство.