Học Lily, từng bước một
Chào mừng! Mỗi hướng dẫn bắt đầu từ con số không và xây dựng cùng một thứ nhỏ — một biểu mẫu dễ tiếp cận, có kiểu — trong khoảng 10 phút, để bạn so sánh các framework một cách công bằng. Sau đó đi sâu hơn với giao diện và tùy chọn người dùng.
Trước khi bắt đầu
Bạn cần ít một cách đáng ngạc nhiên:
- Với hướng dẫn HTML — chỉ cần trình duyệt và trình soạn thảo văn bản. Đó là toàn bộ bộ công cụ.
- Với Svelte, React, Vue, Angular hoặc Nunjucks — git, Node 26 và pnpm 10 trở lên.
- Với Blazor — git và .NET SDK 8 trở lên.
Mới làm quen với thành phần headless? Bạn đến đúng chỗ rồi — mỗi hướng dẫn giải thích điều đang diễn ra khi bạn làm, và mỗi bước cho thấy chính xác đoạn mã cần sao chép.
Bốn bước từ con số không đến khi phát hành
- Thành phần đầu tiên của bạn (~5 phút) — chọn framework của bạn bên dưới, lấy mã và hiển thị một Button.
- Ghép và tạo kiểu (~5 phút) — xây một biểu mẫu có nhãn và tạo kiểu cho nó dựa trên các móc lớp kebab-case (một phần của mỗi hướng dẫn framework).
- Áp dụng giao diện (~15 phút) — thay CSS tự viết của bạn bằng một trong 57 giao diện làm sẵn, rồi để người dùng chuyển đổi lúc chạy: hướng dẫn giao diện.
- Tôn trọng tùy chọn (~15 phút) — thêm lựa chọn ngôn ngữ và cỡ chữ bằng các trợ thủ tùy chọn: hướng dẫn trợ thủ.
Chọn framework của bạn
HTML
Sao chép HTML ngữ nghĩa với các móc lớp rồi bắt đầu — chỉ cần một trình duyệt và một trình soạn thảo.
Svelte
Rune của Svelte 5, snippet và ràng buộc hai chiều với bind:value .
React
Thành phần hàm với value + onChange và trải các prop còn lại.
Vue
Thành phần một tệp của Vue 3 với hỗ trợ v-model .
Angular
Thành phần độc lập của Angular với đầu vào signal và [(value)].
Blazor
Thành phần Razor với tham số, ChildContentvà kiểm thử bUnit.
Nunjucks
Macro hiển thị phía máy chủ cho Eleventy và mọi quy trình mẫu của Node.
Phân vân? Hãy bắt đầu với HTML — nó dạy hợp đồng móc lớp mà mọi framework khác đều dùng chung, và chạy thẳng từ một tệp.
Đi sâu hơn
Giao diện
Liên kết một trong 57 giao diện làm sẵn — NHS, GOV.UK, USWDS, sáng, tối và nhiều hơn nữa — ghi đè bằng CSS của riêng bạn, và thêm việc chuyển giao diện lúc chạy bằng trợ thủ theme-picker.
Trợ thủ tùy chọn
Trao cho người dùng quyền kiểm soát giao diện, ngôn ngữ, cỡ chữ, chuyển động, tìm kiếm, liên kết trang, chia sẻ và nhập ngày/giờ với theme-picker, locale-picker, text-size-picker, motion-picker, search-picker, link-picker, share-picker và date-time-picker: các điều khiển headless với tính lưu trữ bền, an toàn SSR và tự động phát hiện RTL.
Sau các hướng dẫn
- Duyệt danh mục thành phần — mỗi thành phần đều ghi rõ prop, hợp đồng ARIA và hành vi bàn phím của nó.
- Sao chép một ứng dụng ví dụ để xem cả 571 thành phần được tạo kiểu và cùng hoạt động — CSS nhắm vào đúng các móc lớp bạn vừa dùng, nên hãy sao chép bất kỳ phần nào vào dự án và điều chỉnh tùy ý.
- Có câu hỏi? Trang trợ giúp có câu trả lời, phần hỏi đáp và cách liên hệ một người thân thiện. Và nếu một hướng dẫn có thể rõ ràng hơn, hãy cho chúng tôi biết — chúng tôi sẵn lòng cải thiện.