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

తదుపరి దశలు

దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.