เรียนรู้ Lily ทีละขั้นตอน
ยินดีต้อนรับ! ทุกบทเรียนเริ่มจากศูนย์และสร้างสิ่งเล็ก ๆ เหมือนกัน — ฟอร์มที่เข้าถึงได้และมีสไตล์ — ในเวลาประมาณ 10 นาที เพื่อให้คุณเปรียบเทียบเฟรมเวิร์กได้อย่างเท่าเทียม จากนั้นไปต่อให้ลึกขึ้นกับการจัดธีมและการตั้งค่าของผู้ใช้
ก่อนเริ่ม
สิ่งที่ต้องใช้น้อยอย่างน่าประหลาดใจ:
- สำหรับบทเรียน HTML — แค่เบราว์เซอร์และโปรแกรมแก้ไขข้อความ นั่นคือเครื่องมือทั้งหมด
- สำหรับ Svelte, React, Vue, Angular หรือ Nunjucks — git Node 26 และ pnpm 10 ขึ้นไป
- สำหรับ Blazor — git และ .NET SDK 8 ขึ้นไป
เพิ่งรู้จักคอมโพเนนต์แบบ headless ใช่ไหม คุณมาถูกที่แล้ว — ทุกบทเรียนอธิบายสิ่งที่เกิดขึ้นระหว่างทาง และทุกขั้นตอนแสดงโค้ดที่ต้องคัดลอกอย่างครบถ้วน
สี่ขั้นตอนจากศูนย์สู่การใช้งานจริง
- คอมโพเนนต์แรกของคุณ (ประมาณ 5 นาที) — เลือกเฟรมเวิร์กด้านล่าง ดึงโค้ด แล้วแสดง Button
- ประกอบและจัดสไตล์ (ประมาณ 5 นาที) — สร้างฟอร์มที่มีป้ายกำกับและจัดสไตล์ผ่านคลาสฮุกแบบ kebab-case (เป็นส่วนหนึ่งของบทเรียนแต่ละเฟรมเวิร์ก)
- ใส่ธีม (ประมาณ 15 นาที) — เปลี่ยน CSS ที่เขียนเองเป็นหนึ่งใน 57 ธีมสำเร็จรูป แล้วให้ผู้ใช้สลับขณะรันไทม์: บทเรียนการจัดธีม.
- เคารพการตั้งค่า (ประมาณ 15 นาที) — เพิ่มการเลือกภาษาและขนาดข้อความด้วยตัวช่วยการตั้งค่า: บทเรียนตัวช่วย.
เลือกเฟรมเวิร์กของคุณ
HTML
คัดลอก HTML เชิงความหมายพร้อมคลาสฮุกแล้วไปต่อ — มีเบราว์เซอร์กับโปรแกรมแก้ไขก็พอ
Svelte
Svelte 5 runes สนิปเป็ต และการผูกสองทางด้วย bind:value
React
คอมโพเนนต์แบบฟังก์ชันกับ value + onChange และการกระจาย prop ที่เหลือ
Vue
คอมโพเนนต์ไฟล์เดียวของ Vue 3 พร้อมรองรับ v-model
Angular
คอมโพเนนต์แบบ standalone ของ Angular กับอินพุตแบบ signal และ [(value)].
Blazor
คอมโพเนนต์ Razor พร้อมพารามิเตอร์ ChildContent และการทดสอบ bUnit
Nunjucks
มาโครที่เรนเดอร์ฝั่งเซิร์ฟเวอร์สำหรับ Eleventy และไปป์ไลน์เทมเพลต Node ใด ๆ
ลังเลอยู่ใช่ไหม? เริ่มกับ HTML — สอนข้อตกลงคลาสฮุกที่ทุกเฟรมเวิร์กอื่นใช้ร่วมกัน และรันได้จากไฟล์โดยตรง
ไปให้ลึกขึ้น
การจัดธีม
ลิงก์หนึ่งใน 57 ธีมสำเร็จรูป — NHS, GOV.UK, USWDS, สว่าง, มืด และอื่น ๆ — แทนที่ด้วย CSS ของคุณเอง และเพิ่มการสลับธีมขณะรันไทม์ด้วยตัวช่วย theme-picker
ตัวช่วยการตั้งค่า
ให้ผู้ใช้ควบคุมธีม ภาษา ขนาดข้อความ การเคลื่อนไหว การค้นหา ลิงก์หน้า การแชร์ และการป้อนวันที่/เวลา ด้วย theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker และ date-time-picker: ตัวควบคุมแบบ headless พร้อมการเก็บค่าถาวร ความปลอดภัยต่อ SSR และการตรวจจับ RTL อัตโนมัติ
หลังจบบทเรียน
- เรียกดู แคตตาล็อกคอมโพเนนต์ — ทุกคอมโพเนนต์มีเอกสารระบุ props ข้อตกลง ARIA และพฤติกรรมแป้นพิมพ์
- โคลน แอปตัวอย่าง เพื่อดูคอมโพเนนต์ทั้ง 571 ตัวที่มีสไตล์และทำงานร่วมกัน — CSS มุ่งเป้าไปที่คลาสฮุกเดียวกับที่คุณเพิ่งใช้ ดังนั้นคัดลอกส่วนใดก็ได้ไปใส่ในโปรเจกต์แล้วปรับตามใจชอบ
- มีคำถาม? หน้าช่วยเหลือ มีคำตอบ คำถามที่พบบ่อย และช่องทางติดต่อมนุษย์ที่เป็นมิตร และหากบทเรียนใดทำให้ชัดเจนกว่านี้ได้ บอกเรา — เรายินดีปรับปรุง