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 और कीबोर्ड।

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।