Lily Design System™

Oideachadh Vue

Co-phàirtean aon-fhaidhle Vue 3 le props le seòrsachadh, defineModel ceangal dà-shlighe, agus v-bind="$attrs" dol-troimhe.

Na thogas tu

Foirm fios-thugainn bheag — in-chur le leubail, putan cur-a-steach, v-model ceangal, giùlan clàr-iuchrach is leughadair-sgrìn fìor — an toiseach lom, an uairsin le stoidhle, ann an timcheall air 10 mionaidean.

Mus tòisich thu

Feumaidh tu git, Node 22 no nas ùire, agus pnpm 10 no nas ùire. Obraichidh pròiseact Vue 3 sam bith — Nuxt, Vite no Vue sìmplidh.

Ceum 1 — Faigh an còd

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

Tha na co-phàirtean nam faidhlichean rèidh ann an components/ — Button.vue, TextInput.vue — gach fear le a dheuchainn, story agus sgrìobhainnean ri thaobh. Dèan lethbhreac dhe na faidhlichean a tha a dhìth ort, no dèan vendoring air an stòr.

Ceum 2 — A’ chiad cho-phàirt agad

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

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

A’ reandaradh <button class="button" type="button">. Tha props a’ freagairt ris na frèamaichean eile: type, disabled, pressed, label, a bharrachd air tuiteam-troimhe bhuadhan airson a h-uile càil eile.

Ceum 3 — Cuir foirm bheag ri chèile

<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’ gabhail an label mar a prop fhèin seach co-phàirt leubail neadaichte — thoir seachad e aon turas, air Field, agus TextInputa tha a’ maidseadh label a’ solarachadh an ainm so-ruigsinneach.

Dearbhte 2026-08-29: bha dreachd na bu thràithe air co-phàirt air leth neadachadh Label am broinn Field, a’ reandaradh dà leubail (fear falamh) oir bidh Field mu thràth a’ reandaradh a fhir fhèin bhon label prop — chaidh a ghlacadh le bhith a’ trusadh na criomaig cheart. An slighe measgaichte foirm fios-thugainn an aon phàtran, air a chleachdadh le deuchainnean e2e is axe fìor.

TextInput a’ cleachdadh defineModel, agus mar sin v-model ag obair sa bhad.

Dèan cinnteach air d’ obair: ruith an tagradh agus tha an fhoirm a’ coimhead lom — dìreach mar a bha dùil: tha an stoidhle fhathast romhainn. Brùth Tab: bidh am fòcas a’ gluasad tro gach smachd, tha an leubail air ainmeachadh, agus obraichidh cur-a-steach. Tha an giùlan deiseil; is leatsa an coltas, agus is e an ath rud.

Ceum 4 — Cuir stoidhle air

Cuir stoidhle air na crochaidhean clas — .button, .text-input, .label, .field — anns a’ bhileag-stoidhle agad, no ceangail ùrlar deiseil ann an index.html / nuxt.config: 

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

Ceum 5 — Faic a h-uile càil ag obair

Tha an tagradh eisimpleir Nuxt an catalog slàn le stoidhle is taisbeanadh, le Playwright e2e agus bun-loidhne 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

Na ceumannan a leanas

Ceistean air an t-slighe? Tha an duilleag chuideachaidh làn fhreagairtean — agus nam b’ urrainn ceum a bhith nas soilleire, innis dhuinn agus nì sinn an t-oideachadh nas fheàrr le toileachas.