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

अगले चरण

रास्ते में सवाल हैं? सहायता पृष्ठ उत्तरों से भरा है — और अगर कोई चरण और स्पष्ट हो सकता है, हमें बताएँ और हम खुशी से ट्यूटोरियल सुधारेंगे।