Lily Design System™

មេរៀន Svelte

បណ្ណាល័យ Svelte របស់ Lily ជាការអនុវត្តស្តង់ដារ៖ Svelte 5 runes លក្ខណៈសម្បត្តិមានប្រភេទ ការរាលដាល rest-prop និងការចងពីរទិសជាមួយ bind:value.

អ្វីដែលអ្នកនឹងសាងសង់

ទម្រង់ទំនាក់ទំនងតូចមួយ — វាលបញ្ចូលដែលមានស្លាក ប៊ូតុងដាក់ស្នើ ការចងពីរទិស អាកប្បកិរិយាក្តារចុច និងកម្មវិធីអានអេក្រង់ពិតប្រាកដ — ដំបូងទទេស្អាត បន្ទាប់មកមានរចនាប័ទ្ម ក្នុងរយៈពេលប្រហែល ១០ នាទី។

មុនពេលអ្នកចាប់ផ្តើម

អ្នកត្រូវការ git, Node 22 ឬថ្មីជាងនេះ និង pnpm 10 ឬថ្មីជាងនេះ។ គម្រោង Svelte 5 ណាក៏បាន — កម្មវិធីថ្មីស្រឡាង npx sv create ក៏គ្រប់គ្រាន់ដែរ។

ជំហាន ១ — យកកូដ

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 និងឯកសាររបស់វាទន្ទឹមគ្នា។ ចម្លងថតដែលអ្នកត្រូវការចូលកម្មវិធីរបស់អ្នក ឬពឹងផ្អែកលើឃ្លាំង ហើយនាំចូលដោយផ្ទាល់។

ជំហាន ២ — សមាសភាគដំបូងរបស់អ្នក

<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 ការបដិសេធ) ហើយគុណលក្ខណៈបន្ថែមណាមួយរាលដាលលើឫស។

ជំហាន ៣ — ផ្សំទម្រង់តូចមួយ

<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 ផ្តល់ការចងពីរទិសភ្លាមៗ។

បានផ្ទៀងផ្ទាត់ 2026-08-29៖ កំណាត់ពិតប្រាកដនេះត្រូវបានចងក្រងតាមរយៈ svelte/server ហើយត្រូវបានពិនិត្យសម្រាប់មួយ ភ្ជាប់ត្រឹមត្រូវ <label for> — សេចក្តីព្រាងដំបូងបានដាក់ដាច់ដោយឡែក Label ខាងក្នុង Fieldដែលបង្ហាញ ពីរ ស្លាក (មួយទទេ) ពីព្រោះ Field បានបង្ហាញរបស់ខ្លួនរួចហើយពី label លក្ខណៈសម្បត្តិ។ ផ្លូវទម្រង់ទំនាក់ទំនងផ្សំ ជាលំនាំដូចគ្នា ដែលធ្វើតេស្តដោយ e2e និង axe ពិតប្រាកដ។

ពិនិត្យការងាររបស់អ្នក៖ ដំណើរការកម្មវិធី ហើយទម្រង់មើលទៅធម្មតា — ដូចដែលបានគ្រោងទុក៖ រចនាប័ទ្មនៅខាងមុខ។ ចុច Tab៖ ការផ្តោតផ្លាស់ទីតាមការគ្រប់គ្រងនីមួយៗ ស្លាកត្រូវបានប្រកាស ហើយការដាក់ស្នើដំណើរការ។ អាកប្បកិរិយាបានចប់; រូបរាងជារបស់អ្នក ហើយជាជំហានបន្ទាប់។

ជំហាន ៤ — ដាក់រចនាប័ទ្ម

អ្វីៗខាងលើបង្ហាញជារចនាសម្ព័ន្ធសុទ្ធ រួចជាស្រេចសម្រាប់រចនាប័ទ្មរបស់អ្នក។ ដាក់រចនាប័ទ្ម class hook — .button, .text-input, .label, .field — ក្នុងសន្លឹករចនាប័ទ្មសកលរបស់អ្នក ឬភ្ជាប់ស្បែករួចជាស្រេចក្នុង app.html: 

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

ការកែតម្រូវក្នុងមួយ instance ឆ្លងតាម class លក្ខណៈសម្បត្តិ ដែលត្រូវបានបន្ថែមទៅ hook មូលដ្ឋាន៖ <Button class="wide"> បង្ហាញ class="button wide".

ជំហាន ៥ — មើលអ្វីៗទាំងអស់ដំណើរការ

កម្មវិធីគំរូ 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

ជំហានបន្ទាប់

មានសំណួរតាមផ្លូវ? ទំព័រជំនួយ ពេញដោយចម្លើយ — ហើយប្រសិនបើជំហានណាអាចច្បាស់ជាងនេះ ប្រាប់យើង ហើយយើងនឹងកែលម្អមេរៀនដោយអំណរ។