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 सुलभ नाव पुरवते.

2026-08-29 रोजी तपासले: आधीच्या मसुद्यात वेगळा 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

पुढील पायऱ्या

  • थीम — Blazor theme-picker साहाय्यकासह चालू असताना बदल (NuGet वरील Razor क्लास लायब्ररी).
  • पसंती साहाय्यक — भाषा आणि मजकुराचा आकार.
  • घटक कॅटलॉग — प्रत्येक घटकासाठी गुणधर्म, ARIA आणि कीबोर्ड.

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.