Blazor ಟ್ಯುಟೋರಿಯಲ್

ನೀವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತೀರಿ

ಒಂದು ಸಣ್ಣ ಸಂಪರ್ಕ ಫಾರ್ಮ್ — ಲೇಬಲ್ ಇರುವ ಇನ್‌ಪುಟ್, ಸಲ್ಲಿಸು ಬಟನ್, @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 ಪ್ರವೇಶಿಸಬಹುದಾದ ಹೆಸರನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಹಂತ 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, ಮತ್ತು ಕೀಬೋರ್ಡ್.

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.