Lily Design System™

Blazor ٹیوٹوریل

پیرامیٹر والے Razor کلاس لائبریری اجزاء، ChildContent رینڈر ٹکڑے، خصوصیات کا پھیلاؤ اور ہر جزو کے لیے ایک bUnit ٹیسٹ۔

آپ کیا بنائیں گے

ایک چھوٹا رابطہ فارم — لیبل والا خانہ، جمع کرانے کا بٹن، @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 مثالی ایپ مکمل کیٹلاگ اسلوب اور نمائش کے ساتھ دکھاتی ہے، Playwright e2e ٹیسٹوں کے ساتھ: 

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 معاون کے ساتھ چلتے وقت تبدیلی (NuGet پر Razor کلاس لائبریری)۔
  • ترجیحی معاونین — زبان اور متن کا سائز۔
  • جزو کیٹلاگ — ہر جزو کے لیے خصوصیات، ARIA اور کی بورڈ۔

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔