Vue oktatóanyag — Lily Design System

Mit fogsz építeni

Egy kis kapcsolatfelvételi űrlap — címkézett mező, küldés gomb, v-model kötés, valódi billentyűzet- és képernyőolvasó-viselkedés — először csupaszon, aztán stílusosan, nagyjából 10 perc alatt.

Mielőtt elkezdenéd

Szükséged van gitre, Node 22-re vagy újabbra és pnpm 10-re vagy újabbra. Bármelyik Vue 3 projekt megfelel — Nuxt, Vite vagy sima Vue.

1. lépés — Szerezd meg a kódot

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

A komponensek lapos fájlok itt: components/ — Button.vue, TextInput.vue — mindegyik saját teszttel, story-val és dokumentációval a háta mögött. Másold a szükséges fájlokat, vagy hozd be a tárolót.

2. lépés — Az első komponensed

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

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

Ezt rendereli: <button class="button" type="button">. A propok megfelelnek a többi keretrendszernek: type, disabled, pressed, label, plusz attribútum-átengedés mindenre, ami marad.

3. lépés — Állíts össze egy kis űrlapot

<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 a látható label a saját propjaként beágyazott címkekomponens helyett — add át egyszer, a Fieldés TextInputa label biztosítja a hozzáférhető nevet.

Ellenőrizve 2026-08-29: egy korábbi vázlat külön Label belül a Fieldelembe, ami két címkét renderelt (az egyik üres), mert a Field már magától rendereli a sajátját a label prop — a pontos kódrészlet lefordításával derült ki. A Az összeállított kapcsolatfelvételi űrlap útvonala ugyanez a minta, valódi e2e- és axe-tesztekkel kipróbálva.

TextInput ezt használja: defineModel, így egy sima v-model dobozból kivéve működik.

Ellenőrizd a munkádat: indítsd el az alkalmazást, és az űrlap csupasznak látszik — pontosan úgy, ahogy szántuk: a stílus még hátravan. Nyomd meg a Tabbillentyűt: a fókusz végigmegy minden vezérlőn, a címkét bemondja, és a küldés működik. A viselkedés kész; a megjelenés a tiéd, és a következő lépés.

4. lépés — Stílus hozzá

Stílusozd az osztálykampókat — .button, .text-input, .label, .field — a stíluslapodban, vagy hivatkozz egy kész témára itt: index.html / nuxt.config:

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

5. lépés — Nézd meg, ahogy az egész működik

A Nuxt példaalkalmazás a teljes katalógus stílusosan és bemutatva, Playwright e2e-vel és axe-core alapvonallal:

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

További lépések

Témák — váltás futásidőben a Vue theme-picker segédjével.
Beállítási segédek — nyelv és szövegméret.
Komponenskatalógus — tulajdonságok, ARIA és billentyűzet komponensenként.

Kérdésed akad útközben? A súgóoldal tele van válaszokkal — és ha egy lépés érthetőbb lehetne, szólj nekünk és szívesen javítjuk az oktatóanyagot.