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 מציגה את הקטלוג המלא מעוצב ומודגם, עם בדיקות 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

השלבים הבאים

שאלות בדרך? עמוד העזרה מלא בתשובות — ואם שלב יכול להיות ברור יותר, ספרו לנו ונשמח לשפר את המדריך.