ບົດສອນ Svelte

ສິ່ງທີ່ທ່ານຈະສ້າງ

ແບບຟອມຕິດຕໍ່ນ້ອຍໆ — ຊ່ອງປ້ອນທີ່ມີປ້າຍ, ປຸ່ມສົ່ງ, ການຜູກສອງທາງ, ພຶດຕິກຳແປ້ນພິມ ແລະໂປຣແກຣມອ່ານໜ້າຈໍຈິງ — ທຳອິດເປົ່າ, ຈາກນັ້ນມີຮູບແບບ, ໃນປະມານ 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 , ການທົດສອບ, stories ແລະເອກະສານຂອງມັນຄຽງຂ້າງກັນ. ສຳເນົາໄດເຣັກທໍຣີທີ່ທ່ານຕ້ອງການເຂົ້າແອັບຂອງທ່ານ, ຫຼືເພິ່ງພາຄັງແລະນຳເຂົ້າໂດຍກົງ.

ຂັ້ນຕອນ 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">. ຄຸນສົມບັດມີຊະນິດ: 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 ເປັນຄຸນສົມບັດຂອງຕົນເອງ ແທນທີ່ຈະເປັນອົງປະກອບປ້າຍທີ່ຊ້ອນກັນ — ສົ່ງຜ່ານຄັ້ງດຽວ, ທີ່ Field, ແລະ TextInputທີ່ກົງກັນໃນ label ໃຫ້ຊື່ທີ່ເຂົ້າເຖິງໄດ້. TextInput's value ເປັນ $bindable ຄຸນສົມບັດ rune, ດັ່ງນັ້ນ bind:value ໃຫ້ທ່ານການຜູກສອງທາງທັນທີ.

ຂັ້ນຕອນ 4 — ໃສ່ຮູບແບບ

ທຸກຢ່າງຂ້າງເທິງສະແດງເປັນໂຄງສ້າງລ້ວນ, ພ້ອມສຳລັບຮູບແບບຂອງທ່ານ. ໃສ່ຮູບແບບ class hook — .button, .text-input, .label, .field — ໃນ stylesheet ສາກົນຂອງທ່ານ, ຫຼືເຊື່ອມຕໍ່ຮູບແບບສີສັນສຳເລັດຮູບໃນ app.html:

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

ການປັບແຕ່ງຕໍ່ instance ຜ່ານ class ຄຸນສົມບັດ, ເຊິ່ງຖືກຕໍ່ທ້າຍ base hook: <Button class="wide"> ສະແດງ class="button wide".

ຂັ້ນຕອນ 5 — ເບິ່ງທຸກຢ່າງເຮັດວຽກ

ແອັບຕົວຢ່າງ SvelteKit ແມ່ນແຄັດຕາລັອກດຽວກັນທີ່ມີຮູບແບບຄົບ, ພ້ອມການສາທິດສົດ, ການທົດສອບ Playwright e2e ແລະ axe-core accessibility baseline:

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

ຂັ້ນຕອນຕໍ່ໄປ

• ຮູບແບບສີສັນ — ການສະຫຼັບຕອນແລ່ນດ້ວຍຕົວຊ່ວຍ Svelte theme-picker.
• ຕົວຊ່ວຍການຕັ້ງຄ່າ — ພາສາ ແລະຂະໜາດຕົວອັກສອນ.
• ແຄັດຕາລັອກອົງປະກອບ — ຄຸນສົມບັດ, ARIA ແລະແປ້ນພິມຕໍ່ອົງປະກອບ.

ມີຄຳຖາມລະຫວ່າງທາງບໍ? ໜ້າຊ່ວຍເຫຼືອ ເຕັມໄປດ້ວຍຄຳຕອບ — ແລະຖ້າຂັ້ນຕອນໃດຊັດເຈນຂຶ້ນໄດ້, ບອກພວກເຮົາ ແລະພວກເຮົາຍິນດີປັບປຸງບົດສອນ.