Vodnik za Vue — Lily Design System

Kaj boste ustvarili

Majhen kontaktni obrazec — polje z oznako, gumb za pošiljanje, v-model vezava, resnično vedenje tipkovnice in bralnika zaslona — najprej gol, nato oblikovan, v približno 10 minutah.

Preden začnete

Potrebujete git, Node 22 ali novejši in pnpm 10 ali novejši. Primeren je vsak projekt Vue 3 — Nuxt, Vite ali navaden Vue.

Korak 1 — Pridobite kodo

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

Komponente so ravne datoteke v components/ — Button.vue, TextInput.vue — vsaka z lastnim testom, storyjem in dokumentacijo ob sebi. Kopirajte potrebne datoteke ali povlecite repozitorij.

Korak 2 — Vaša prva komponenta

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

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

Izriše <button class="button" type="button">. Propi ustrezajo drugim ogrodjem: type, disabled, pressed, label, plus prepuščanje atributov za vse ostalo.

Korak 3 — Sestavite majhen obrazec

<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 sprejme vidno label kot lasten prop namesto gnezdene komponente oznake — posredujte jo enkrat, pri Fieldin TextInputiz label zagotovi dostopno ime.

Preverjeno 2026-08-29: prejšnji osnutek je gnezdil ločeno komponento Label znotraj Field, kar je izrisalo dve oznaki (eno prazno), ker Field že izriše svojo iz vhoda label prop — odkrito s prevajanjem natančnega izrezka. Pot Sestavljena pot kontaktnega obrazca je isti vzorec, preizkušen z resničnimi testi e2e in axe.

TextInput uporablja defineModel, zato navaden v-model deluje takoj.

Preverite svoje delo: zaženite aplikacijo in obrazec je videti gol — natanko kot je bilo načrtovano: oblikovanje šele sledi. Pritisnite Tab: fokus gre skozi vsak kontrolnik, oznaka se izgovori in pošiljanje deluje. Vedenje je končano; videz je vaš in je naslednji korak.

Korak 4 — Oblikujte ga

Oblikujte razredne kavlje — .button, .text-input, .label, .field — v svoji slogovni datoteki ali povežite že pripravljeno temo v index.html / nuxt.config:

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

Korak 5 — Poglejte, kako vse deluje

Vzorčna aplikacija Nuxt je celoten katalog oblikovan in predstavljen, s Playwright e2e in izhodiščem 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

Naslednji koraki

Teme — preklapljanje med izvajanjem s pomočnikom theme-picker za Vue.
Pomočniki za nastavitve — jezik in velikost besedila.
Katalog komponent — lastnosti, ARIA in tipkovnica za vsako komponento.

Vprašanja na poti? Stran s pomočjo je polna odgovorov — in če bi bil kakšen korak lahko jasnejši, sporočite nam in vodnik bomo z veseljem izboljšali.