Lily Design System™

Svelte টিউটোরিয়াল

Lily-র Svelte লাইব্রেরি আদর্শ বাস্তবায়ন: Svelte 5 runes, টাইপ করা props, বাকি props ছড়িয়ে দেওয়া, এবং এর সঙ্গে দ্বিমুখী বাইন্ডিং 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 ফাইল, তার পরীক্ষা, 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, তাই

২০২৬-০৮-২৯ তারিখে যাচাইকৃত: আপনাকে তৎক্ষণাৎ দ্বিমুখী বাইন্ডিং দেয়। svelte/server হুবহু এই খণ্ডটি এর মাধ্যমে কম্পাইল করা হয়েছে <label for> এবং একটিমাত্র, সঠিকভাবে জোড়া লেবেলের জন্য পরীক্ষিত Label -এর ভেতরে Field— আগের একটি খসড়া আলাদা দুটি লেবেল (একটি খালি) দেখাত, কারণ Field ইতিমধ্যেই নিজের লেবেল label ভেতরে রেখেছিল, যা দেখাত সংযুক্ত যোগাযোগ-ফর্ম রুট একই প্যাটার্ন, প্রকৃত e2e ও axe পরীক্ষায় যাচাই করা।

আপনার কাজ পরীক্ষা করুন: অ্যাপ চালান, আর ফর্মটি সাদামাটা দেখায় — ঠিক যেমন উদ্দেশ্য ছিল: স্টাইলিং এখনো সামনে। চাপুন Tab: ফোকাস প্রতিটি নিয়ন্ত্রণের মধ্য দিয়ে যায়, লেবেল ঘোষিত হয় এবং জমা দেওয়া কাজ করে। আচরণ সম্পূর্ণ; চেহারা আপনার, আর সেটাই পরবর্তী ধাপ।

ধাপ ৪ — স্টাইল দিন

উপরের সবকিছু খাঁটি কাঠামো হিসেবে রেন্ডার হয়, আপনার স্টাইলের জন্য প্রস্তুত। ক্লাস হুকগুলোতে স্টাইল দিন — .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

পরবর্তী ধাপ

পথে প্রশ্ন আছে? সহায়তা পাতা উত্তরে ভরা — আর কোনো ধাপ আরও পরিষ্কার হতে পারলে, আমাদের জানান আর আমরা খুশি মনে টিউটোরিয়াল উন্নত করব।