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

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।