Svelte ट्युटोरियल

तुम्ही काय बनवाल

एक छोटा संपर्क फॉर्म — लेबल असलेले क्षेत्र, सबमिट बटण, द्विदिशा बाइंडिंग, खरे कीबोर्ड आणि स्क्रीन-रीडर वर्तन — आधी साधा, मग शैलीबद्ध, सुमारे १० मिनिटांत.

सुरू करण्यापूर्वी

तुम्हाला 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 फाइल, त्याच्या चाचण्या, story आणि दस्तऐवज शेजारी आहेत. हव्या त्या डिरेक्टरी तुमच्या अॅपमध्ये कॉपी करा, किंवा रेपोवर अवलंबून राहा आणि थेट आयात करा.

पायरी २ — तुमचा पहिला घटक

<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 टॉगल बटणांसाठी),

पायरी ३ — एक छोटा फॉर्म बनवा

<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 आहे, म्हणून

पायरी ४ — त्याला शैली द्या

वरील सर्व काही शुद्ध रचना म्हणून रेंडर होते, तुमच्या शैलींसाठी तयार. क्लास हुकना शैली द्या — .button, .text-input, .label, .field — तुमच्या जागतिक स्टाइलशीटमध्ये, किंवा तयार थीम येथे लिंक करा app.html:

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

प्रत्येक उदाहरणानुसार बदल याद्वारे जातात class prop, जो मूळ हुकला जोडला जातो: <Button class="wide"> दाखवते class="button wide".

पायरी ५ — सगळे चालताना पहा

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

पुढील पायऱ्या

• थीम — Svelte theme-picker साहाय्यकासह चालू असताना बदल.
• पसंती साहाय्यक — भाषा आणि मजकुराचा आकार.
• घटक कॅटलॉग — प्रत्येक घटकासाठी गुणधर्म, ARIA आणि कीबोर्ड.

वाटेत प्रश्न आहेत? मदत पृष्ठ उत्तरांनी भरलेले आहे — आणि एखादी पायरी अधिक स्पष्ट करता आली तर, आम्हाला सांगा आणि आम्ही आनंदाने ट्युटोरियल सुधारू.