Lily Design System™

Οδηγός Vue

Στοιχεία ενός αρχείου Vue 3 με τυποποιημένα props, 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 αντιστοιχούν στα υπόλοιπα frameworks: 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

Επόμενα βήματα

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.