Οδηγός Blazor — Lily Design System

Τι θα φτιάξετε

Μια μικρή φόρμα επικοινωνίας — πεδίο με ετικέτα, κουμπί υποβολής, @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 δείχνει ολόκληρο τον κατάλογο μορφοποιημένο και επιδεδειγμένο, με δοκιμές e2e Playwright:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-blazor-web-examples
dotnet run --project src/LilyBlazorWebExamples

Επόμενα βήματα

Θέματα — εναλλαγή κατά την εκτέλεση με τον βοηθό theme-picker για Blazor (βιβλιοθήκη κλάσεων Razor στο NuGet).
Βοηθοί προτιμήσεων — γλώσσα και μέγεθος κειμένου.
Κατάλογος στοιχείων — ιδιότητες, ARIA και πληκτρολόγιο ανά στοιχείο.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.