Lily Design System™

Svelte ट्यूटोरियल

Lily के Svelte लाइब्रेरी मानक कार्यान्वयन ह: Svelte 5 runes, टाइप कइल 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 एगो bind:value rune prop ह, एहसे

2026-08-29 के जाँचल: रउआ के तुरंत दू-तरफा बाइंडिंग दे देला। svelte/server ठीक एह टुकड़ा के कंपाइल कइल गइल <label for> आ एके, सही जुड़ल लेबल खातिर जाँचल गइल Label के भीतर Field— पहिले के मसौदा में अलग दू गो लेबल (एगो खाली) दिखल काहे कि Field पहिले से आपन label भीतर रखल गइल रहे, जवना से देखल संयुक्त संपर्क-फॉर्म रास्ता उहे पैटर्न ह, असली e2e आ axe परीक्षण से जाँचल।

आपन काम जाँचीं: ऐप चलाईं आ फॉर्म सादा लउकेला — ठीक वइसहीं जइसे सोचल गइल रहे: शैली अभी आगे बा। दबाईं Tab: फोकस हर नियंत्रण से गुजरेला, लेबल घोषित होखेला आ जमा करे के काम करेला। व्यवहार पूरा बा; रूप रउआ के बा आ अगिला कदम बा।

कदम 4 — एकरा के शैली दीं

ऊपर के सब कुछ शुद्ध संरचना के रूप में रेंडर होखेला, रउआ के शैली खातिर तैयार। क्लास हुक के शैली दीं — .button, .text-input, .label, .field — आपन वैश्विक स्टाइलशीट में, भा तैयार थीम इहाँ लिंक करीं app.html: 

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

हर उदाहरण के हिसाब से बदलाव एकरा से जालें class prop, जे मूल हुक में जोड़ल जाला: <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

अगिला कदम

रास्ता में सवाल बा? मदद पन्ना जवाब से भरल बा — आ अगर कवनो कदम अउरी साफ हो सकेला, हमनी के बताईं आ हमनी खुशी से ट्यूटोरियल सुधारब।