Посібник з Blazor — Lily Design System

Що ви створите

Невелика контактна форма — поле з міткою, кнопка надсилання, @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

Наступні кроки

Теми — перемикання під час виконання за допомогою допоміжного засобу Blazor theme-picker (бібліотека класів Razor у NuGet).
Допоміжні засоби налаштувань — мова та розмір тексту.
Каталог компонентів — властивості, ARIA та клавіатура для кожного компонента.

Питання по дорозі? сторінка допомоги повна відповідей — а якщо якийсь крок може бути зрозумілішим, повідомте нам і ми із задоволенням покращимо посібник.