Lily Design System™

บทเรียน Svelte

ไลบรารี Svelte ของ Lily คือการนำไปใช้ตัวหลัก: runes ของ Svelte 5, props ที่มีชนิดข้อมูล, การกระจาย props ที่เหลือ และการผูกข้อมูลสองทางด้วย bind:value.

สิ่งที่คุณจะสร้าง

ฟอร์มติดต่อขนาดเล็ก — ช่องกรอกที่มีป้ายกำกับ, ปุ่มส่ง, การผูกข้อมูลสองทาง, พฤติกรรมของแป้นพิมพ์และโปรแกรมอ่านหน้าจอจริง — เริ่มจากแบบไม่ตกแต่งก่อน แล้วค่อยใส่สไตล์ ภายในประมาณ 10 นาที

ก่อนเริ่ม

คุณต้องมี git, Node 22 ขึ้นไป และ pnpm 10 ขึ้นไป โปรเจกต์ Svelte 5 ใดก็ได้ — โปรเจกต์ใหม่ npx sv create ก็เพียงพอ

ขั้นที่ 1 — รับโค้ด

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

คอมโพเนนต์อยู่ใน src/lib/components/{Name}/หนึ่งไดเรกทอรีต่อคอมโพเนนต์ พร้อมไฟล์ .svelte การทดสอบ story และเอกสารของมันอยู่เคียงกัน คัดลอกไดเรกทอรีที่ต้องการเข้าแอปของคุณ หรือพึ่งพารีโพแล้วนำเข้าโดยตรง

ขั้นที่ 2 — คอมโพเนนต์แรกของคุณ

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

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

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

แสดงผล <button class="button" type="button">props มีชนิดข้อมูล: type, disabled, pressed (แสดงผล aria-pressed (แสดงผล label ( aria-label สำหรับปุ่มสลับ)

ขั้นที่ 3 — ประกอบฟอร์มเล็ก ๆ

<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 รับ label เป็น prop ของตัวเอง แทนที่จะเป็นคอมโพเนนต์ป้ายกำกับที่ซ้อนอยู่ข้างใน — ส่งเพียงครั้งเดียวที่ Fieldและ TextInputที่ตรงกัน label ให้ชื่อที่เข้าถึงได้ TextInput's value ใช้แทนที่) และแอตทริบิวต์เพิ่มเติมใด ๆ จะกระจายไปที่ราก $bindable เป็น prop แบบ bind:value rune ดังนั้น

ตรวจสอบเมื่อ 2026-08-29: ให้การผูกข้อมูลสองทางได้ทันที svelte/server ตัวอย่างโค้ดนี้ถูกคอมไพล์ผ่าน <label for> และตรวจสอบว่ามีป้ายกำกับที่เชื่อมถูกต้องเพียงอันเดียว Label ภายใน Field— ร่างก่อนหน้านี้ซ้อน ป้ายกำกับ สองอัน (อันหนึ่งว่างเปล่า) เพราะ Field แสดงป้ายกำกับของตัวเองอยู่แล้วจาก label แยกต่างหากไว้ข้างใน ซึ่งทำให้แสดงผลได้ เส้นทางฟอร์มติดต่อแบบประกอบ เป็นรูปแบบเดียวกัน และผ่านการทดสอบ e2e และ axe จริง

ตรวจสอบงานของคุณ: รันแอปแล้วฟอร์มจะดูธรรมดา — ตามที่ตั้งใจ สไตล์ยังรออยู่ข้างหน้า กด Tabโฟกัสจะเลื่อนผ่านทุกตัวควบคุม ป้ายกำกับถูกอ่านออกเสียง และการส่งทำงานได้ พฤติกรรมเสร็จแล้ว ส่วนรูปลักษณ์เป็นของคุณ และเป็นขั้นต่อไป

ขั้นที่ 4 — ใส่สไตล์

ทุกอย่างข้างบนเรนเดอร์เป็นโครงสร้างล้วน พร้อมรับสไตล์ของคุณ ใส่สไตล์ให้ class hook — .button, .text-input, .label, .field — ในสไตล์ชีตส่วนกลางของคุณ หรือลิงก์ธีมสำเร็จรูปใน app.html: 

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

การปรับแต่งรายอินสแตนซ์ทำผ่าน class prop ซึ่งต่อท้าย hook พื้นฐาน: <Button class="wide"> แสดงผล class="button wide".

ขั้นที่ 5 — ดูทุกอย่างทำงาน

แอปตัวอย่าง SvelteKit คือแคตตาล็อกเดียวกันที่ใส่สไตล์ครบ พร้อมเดโมสด การทดสอบ Playwright e2e และเส้นฐานการเข้าถึง 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

ขั้นต่อไป

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