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

அடுத்த படிகள்

வழியில் கேள்விகளா? உதவிப் பக்கம் பதில்களால் நிறைந்தது — ஒரு படி இன்னும் தெளிவாக இருக்க முடிந்தால், எங்களிடம் சொல்லுங்கள் நாங்கள் மகிழ்ச்சியுடன் பயிற்சியை மேம்படுத்துவோம்.