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

اگلے مراحل

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔