Lily Design System™

آموزش Blazor

مؤلفه‌های کتابخانه کلاس Razor با پارامتر، ChildContent قطعه‌های رندر، پخش ویژگی‌ها و یک آزمون bUnit برای هر مؤلفه.

چه چیزی می‌سازید

یک فرم تماس کوچک — فیلد دارای برچسب، دکمه ارسال، @bind-Value پیوند، رفتار واقعی صفحه‌کلید و صفحه‌خوان — ابتدا ساده، سپس استایل‌دار، در حدود ۱۰ دقیقه.

پیش از شروع

به git و .NET SDK 8 یا جدیدتر نیاز دارید. هر پروژه Blazor کار می‌کند — Blazor Web App، Server یا WebAssembly.

گام ۱ — کد را بگیرید

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.

گام ۲ — نخستین مؤلفه شما

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

نمایش می‌دهد <button class="button">. قراردادهای پارامتر مشترک: Label (یک aria-label برای بازنویسی)، CssClass (به قلاب پایه افزوده می‌شود)، ChildContentو [Parameter(CaptureUnmatchedValues = true)] پخش ویژگی‌ها تا هر ویژگی HTML اضافی عبور کند.

گام ۳ — یک فرم کوچک بسازید

<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 نام قابل‌دسترس را فراهم می‌کند.

تأییدشده در ۲۰۲۶-۰۸-۲۹: یک پیش‌نویس قبلی مؤلفه Label جداگانه‌ای را درون Fieldقرار داده بود که دو برچسب (یکی خالی) نمایش می‌داد، چون Field خودش از ورودی Label پارامتر — با بررسی کد منبع مؤلفه کشف شد؛ Form خودش Label پارامتری ندارد، پس استفاده از <Form> در پیش‌نویس قبلی با حذف آن اصلاح شد، به‌جای اختراع ویژگی‌ای که وجود ندارد. مسیر ترکیبی فرم تماس همین الگوست، با آزمون‌های واقعی e2e و axe سنجیده شده.

کارتان را بررسی کنید: برنامه را اجرا کنید و فرم ساده به نظر می‌رسد — دقیقاً همان‌طور که قصد شده: استایل‌دهی هنوز در پیش است. بزنید Tab: تمرکز از هر کنترل می‌گذرد، برچسب اعلام می‌شود و ارسال کار می‌کند. رفتار کامل است؛ ظاهر مال شماست و گام بعدی است.

گام ۴ — استایل بدهید

قلاب‌های کلاس را استایل بدهید — .button, .text-input, .label, .field — در app.css، یا یک تم آماده را در این‌جا پیوند دهید App.razor / index.html: 

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

گام ۵ — همه‌چیز را در حال کار ببینید

برنامه نمونه 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

گام‌های بعدی

در مسیر پرسشی دارید؟ صفحه راهنما پر از پاسخ است — و اگر گامی می‌تواند روشن‌تر باشد، به ما بگویید و ما با کمال میل آموزش را بهبود می‌دهیم.