Lily Design System™

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

টাইপ করা props সহ Vue 3 এক-ফাইল কম্পোনেন্ট, defineModel দ্বিমুখী বাইন্ডিং, এবং v-bind="$attrs" পাস-থ্রু।

আপনি কী তৈরি করবেন

একটি ছোট যোগাযোগ ফর্ম — লেবেলসহ ক্ষেত্র, জমা দেওয়ার বোতাম, v-model বাইন্ডিং, প্রকৃত কিবোর্ড ও স্ক্রিন-রিডার আচরণ — প্রথমে সাদামাটা, তারপর স্টাইলসহ, প্রায় ১০ মিনিটে।

শুরু করার আগে

আপনার git, Node 22 বা নতুন, এবং pnpm 10 বা নতুন লাগবে। যেকোনো Vue 3 প্রকল্প চলবে — Nuxt, Vite বা সাধারণ Vue।

ধাপ ১ — কোড নিন

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-headless
pnpm install
pnpm test        # vitest + @testing-library/vue
pnpm run storybook   # browse all 571 components

কম্পোনেন্টগুলো এখানে সমতল ফাইল হিসেবে আছে: components/ — Button.vue, TextInput.vue — প্রতিটির পাশে তার পরীক্ষা, story ও নথি। যে ফাইল দরকার কপি করুন, বা রিপো আনুন।

ধাপ ২ — আপনার প্রথম কম্পোনেন্ট

<script setup>
import Button from "lily-design-system-vue-headless/components/Button.vue";
</script>

<template>
  <Button @click="save">Save</Button>
</template>

দেখায় <button class="button" type="button">। Props অন্য ফ্রেমওয়ার্কের সঙ্গে মেলে: type, disabled, pressed, label, সঙ্গে বাকি সবকিছুর জন্য অ্যাট্রিবিউট পাস-থ্রু।

ধাপ ৩ — একটি ছোট ফর্ম তৈরি করুন

<script setup>
import { ref } from "vue";
import Form from ".../components/Form.vue";
import Field from ".../components/Field.vue";
import TextInput from ".../components/TextInput.vue";
import Button from ".../components/Button.vue";

const name = ref("");
</script>

<template>
  <Form @submit="handleSubmit">
    <Field label="Full name" required>
      <TextInput id="name" label="Full name" v-model="name" required />
    </Field>
    <Button type="submit">Save</Button>
  </Form>
</template>

Field দৃশ্যমান label নিজের prop হিসেবে, ভেতরে রাখা লেবেল কম্পোনেন্ট হিসেবে নয় — একবার দিন, Fieldএবং TextInput-এর label -এ সহজে ব্যবহারযোগ্য নাম জোগায়।

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

TextInput ব্যবহার করে defineModel, তাই সাধারণ v-model বাক্স থেকেই কাজ করে।

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

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

ক্লাস হুকগুলোতে স্টাইল দিন — .button, .text-input, .label, .field — আপনার স্টাইলশিটে, অথবা একটি তৈরি থিম এখানে লিংক করুন index.html / nuxt.config: 

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

ধাপ ৫ — সবকিছু কাজ করতে দেখুন

Nuxt উদাহরণ অ্যাপ পূর্ণ ক্যাটালগ স্টাইল ও প্রদর্শনসহ, Playwright e2e ও axe-core ভিত্তিরেখাসহ: 

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-vue-nuxt-examples
pnpm install && pnpm run dev

পরবর্তী ধাপ

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