Hướng dẫn Svelte — Lily Design System

Bạn sẽ xây dựng gì

Một biểu mẫu liên hệ nhỏ — ô nhập có nhãn, nút gửi, liên kết hai chiều, hành vi bàn phím và trình đọc màn hình thật — lúc đầu để trơn, sau đó thêm kiểu dáng, trong khoảng 10 phút.

Trước khi bắt đầu

Bạn cần git, Node 22 trở lên và pnpm 10 trở lên. Dự án Svelte 5 nào cũng được — một dự án mới npx sv create là đủ.

Bước 1 — Lấy mã

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

Các thành phần nằm trong src/lib/components/{Name}/, mỗi thành phần một thư mục với tệp .svelte , các bài kiểm thử, story và tài liệu của nó nằm cạnh nhau. Sao chép các thư mục bạn cần vào ứng dụng, hoặc phụ thuộc vào kho mã và nhập trực tiếp.

Bước 2 — Thành phần đầu tiên của bạn

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

Hiển thị <button class="button" type="button">. Các thuộc tính có kiểu: type, disabled, pressed (hiển thị aria-pressed (hiển thị label ( aria-label cho nút bật tắt),

Bước 3 — Ghép một biểu mẫu nhỏ

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

Field nhận label làm thuộc tính riêng thay vì thành phần nhãn lồng bên trong — chỉ truyền một lần, trên Fieldvà TextInputtương ứng label cung cấp tên có thể tiếp cận. TextInput's value để ghi đè), và mọi thuộc tính bổ sung được trải lên gốc. $bindable là thuộc tính rune bind:value nên

Đã xác minh 2026-08-29: cho bạn liên kết hai chiều ngay lập tức. svelte/server đoạn mã chính xác này đã được biên dịch qua <label for> và kiểm tra là chỉ có một nhãn được liên kết đúng Label bên trong Field— bản nháp trước lồng một hai nhãn (một cái rỗng) vì Field đã tự hiển thị nhãn của nó từ label riêng bên trong, khiến hiển thị Tuyến biểu mẫu liên hệ ghép sẵn cũng theo mẫu này, được kiểm chứng bằng các bài kiểm thử e2e và axe thật.

Kiểm tra kết quả: chạy ứng dụng và biểu mẫu trông trơ — đúng như dự định: kiểu dáng còn ở phía trước. Nhấn Tab: tiêu điểm di chuyển qua mọi điều khiển, nhãn được đọc lên và việc gửi hoạt động. Hành vi đã xong; diện mạo là của bạn và là bước tiếp theo.

Bước 4 — Tạo kiểu dáng

Mọi thứ ở trên hiển thị thành cấu trúc thuần, sẵn sàng cho kiểu dáng của bạn. Tạo kiểu cho các class hook — .button, .text-input, .label, .field — trong bảng kiểu toàn cục của bạn, hoặc liên kết một chủ đề dựng sẵn trong app.html:

<link rel="stylesheet" href="/themes/dark.css" />

Tinh chỉnh theo từng thể hiện đi qua class thuộc tính, nối thêm vào hook cơ sở: <Button class="wide"> hiển thị class="button wide".

Bước 5 — Xem mọi thứ hoạt động

Ứng dụng ví dụ SvelteKit là cùng danh mục đó được tạo kiểu đầy đủ, với bản demo trực tiếp, bài kiểm thử Playwright e2e và đường cơ sở tiếp cận axe-core:

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-sveltekit-examples
pnpm install && pnpm run dev

Các bước tiếp theo

Chủ đề — chuyển đổi khi chạy bằng trợ giúp theme-picker của Svelte.
Trợ giúp tùy chọn — ngôn ngữ và cỡ chữ.
Danh mục thành phần — thuộc tính, ARIA và bàn phím của từng thành phần.

Có thắc mắc trên đường đi? Trang trợ giúp có đầy câu trả lời — và nếu một bước có thể rõ ràng hơn, hãy cho chúng tôi biết và chúng tôi sẽ vui lòng cải thiện hướng dẫn.