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

తదుపరి దశలు

దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.