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 উদাহরণ অ্যাপ পূর্ণ ক্যাটালগ স্টাইল ও প্রদর্শনসহ দেখায়, 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

পরবর্তী ধাপ

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।