Lily Design System™

آموزش Vue

مؤلفه‌های تک‌فایلی Vue 3 با props نوع‌دار، 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

گام‌های بعدی

در مسیر پرسشی دارید؟ صفحه راهنما پر از پاسخ است — و اگر گامی می‌تواند روشن‌تر باشد، به ما بگویید و ما با کمال میل آموزش را بهبود می‌دهیم.