Lily Design System™

دليل Blazor

مكوّنات مكتبة أصناف Razor بمعاملات، ChildContent وأجزاء العرض ونشر السمات واختبار bUnit لكل مكوّن.

ما الذي ستبنيه

نموذج اتصال صغير — حقل بتسمية، زر إرسال، @bind-Value ربط، سلوك حقيقي للوحة المفاتيح وقارئ الشاشة — عاريًا أولًا ثم منسَّقًا، في نحو 10 دقائق.

قبل أن تبدأ

تحتاج إلى git وSDK لـ .NET 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

الخطوات التالية

أسئلة في الطريق؟ صفحة المساعدة مليئة بالإجابات — وإن أمكن توضيح خطوة أكثر، أخبرنا وسنحسّن الدليل بكل سرور.