Lily Design System™

Vue பயிற்சி

வகைப்படுத்தப்பட்ட props உடன் Vue 3 ஒற்றைக்கோப்புக் கூறுகள், defineModel இருவழி பிணைப்பு, மற்றும் v-bind="$attrs" கடத்தல்.

நீங்கள் என்ன உருவாக்குவீர்கள்

ஒரு சிறிய தொடர்புப் படிவம் — லேபிளுடன் கூடிய புலம், சமர்ப்பிக்கும் பொத்தான், v-model பிணைப்பு, உண்மையான விசைப்பலகை மற்றும் திரை வாசிப்பான் நடத்தை — முதலில் வெறுமையாக, பிறகு பாணியுடன், சுமார் 10 நிமிடங்களில்.

தொடங்குவதற்கு முன்

உங்களுக்கு git, Node 22 அல்லது புதியது, மற்றும் pnpm 10 அல்லது புதியது தேவை. எந்த Vue 3 திட்டமும் வேலை செய்யும் — Nuxt, Vite அல்லது எளிய Vue.

படி 1 — குறியீட்டைப் பெறுங்கள்

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 மற்றும் ஆவணங்களுடன் அருகிலேயே. தேவையான கோப்புகளை நகலெடுங்கள், அல்லது களஞ்சியத்தைக் கொண்டுவாருங்கள்.

படி 2 — உங்கள் முதல் கூறு

<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, மற்றும் மற்றவை அனைத்திற்கும் பண்புக் கடத்தல்.

படி 3 — ஒரு சிறிய படிவத்தை உருவாக்குங்கள்

<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 அணுகத்தக்க பெயரை வழங்குகிறது.

2026-08-29 அன்று சரிபார்க்கப்பட்டது: முந்தைய வரைவு தனி Label உள்ளே Fieldஉள்ளே வைத்தது, அதனால் இரண்டு லேபிள்கள் (ஒன்று காலி) வழங்கப்பட்டன, ஏனெனில் Field ஏற்கனவே தன் சொந்தத்தை label prop — சரியான துணுக்கைத் தொகுத்ததன் மூலம் கண்டறியப்பட்டது. வழி இணைந்த தொடர்புப் படிவ வழி அதே முறைதான், உண்மையான e2e மற்றும் axe சோதனைகளால் சோதிக்கப்பட்டது.

TextInput பயன்படுத்துகிறது defineModel, எனவே எளிய v-model உடனே வேலை செய்கிறது.

உங்கள் வேலையைச் சரிபார்க்கவும்: பயன்பாட்டை இயக்குங்கள், படிவம் வெறுமையாகத் தெரிகிறது — சரியாக நோக்கப்பட்டபடி: பாணியிடல் இன்னும் வரவுள்ளது. அழுத்துங்கள் Tab: குவியம் ஒவ்வொரு கட்டுப்பாட்டின் வழியாகவும் செல்கிறது, லேபிள் அறிவிக்கப்படுகிறது, சமர்ப்பிப்பு வேலை செய்கிறது. நடத்தை முடிந்தது; தோற்றம் உங்களுடையது, அடுத்த படி அதுவே.

படி 4 — பாணியிடுங்கள்

வகுப்புக் கொக்கிகளுக்குப் பாணியிடுங்கள் — .button, .text-input, .label, .field — உங்கள் நடைத்தாளில், அல்லது தயார் தீமை இங்கே இணைக்கவும் index.html / nuxt.config: 

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

படி 5 — எல்லாம் வேலை செய்வதைப் பாருங்கள்

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

அடுத்த படிகள்

வழியில் கேள்விகளா? உதவிப் பக்கம் பதில்களால் நிறைந்தது — ஒரு படி இன்னும் தெளிவாக இருக்க முடிந்தால், எங்களிடம் சொல்லுங்கள் நாங்கள் மகிழ்ச்சியுடன் பயிற்சியை மேம்படுத்துவோம்.