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 ਅਤੇ ਕੀਬੋਰਡ।

ਰਾਹ ਵਿੱਚ ਸਵਾਲ ਹਨ? ਮਦਦ ਪੰਨਾ ਜਵਾਬਾਂ ਨਾਲ ਭਰਿਆ ਹੈ — ਅਤੇ ਜੇ ਕੋਈ ਕਦਮ ਹੋਰ ਸਾਫ਼ ਹੋ ਸਕਦਾ ਹੈ, ਸਾਨੂੰ ਦੱਸੋ ਅਤੇ ਅਸੀਂ ਖ਼ੁਸ਼ੀ ਨਾਲ ਟਿਊਟੋਰਿਅਲ ਸੁਧਾਰਾਂਗੇ।