Lily Design System™

บทเรียน Blazor

คอมโพเนนต์ไลบรารีคลาส Razor พร้อมพารามิเตอร์ ChildContent render fragment, attribute splatting และการทดสอบ 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 (ต่อท้าย hook พื้นฐาน), ChildContentและ [Parameter(CaptureUnmatchedValues = true)] attribute splatting เพื่อให้แอตทริบิวต์ 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 — ใส่สไตล์

ใส่สไตล์ให้ class hook — .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

ขั้นต่อไป

มีคำถามระหว่างทางไหม? หน้าช่วยเหลือ เต็มไปด้วยคำตอบ — และถ้าขั้นตอนไหนทำให้ชัดเจนกว่านี้ได้ บอกเรา แล้วเรายินดีปรับปรุงบทเรียน