Lily Design System™

Teagasc Vue

Comhpháirteanna comhaid aonair Vue 3 le props clóscríofa, defineModel ceangal dhá-bhealach agus pas tríd v-bind="$attrs" .

An rud a thógfaidh tú

Foirm theagmhála bheag — réimse le lipéad, cnaipe cur isteach, v-model ceangal, fíor-iompar méarchláir agus léitheora scáileáin — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá git, Node 22 nó níos nuaí, agus pnpm 10 nó níos nuaí ag teastáil uait. Oibríonn aon tionscadal Vue 3 — Nuxt, Vite nó Vue simplí.

Céim 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

Is comhaid chothroma iad na comhpháirteanna i components/ — Button.vue, TextInput.vue — gach ceann lena thástáil, scéal agus doiciméadú taobh leis. Cóipeáil na comhaid atá ag teastáil uait, nó tarraing an stóras isteach.

Céim 2 — Do chéad chomhpháirt

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

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

Rindreálann <button class="button" type="button">. Tá na props ag teacht leis na creataí eile: type, disabled, pressed, label, móide pas tríd aitreabúidí do gach rud eile.

Céim 3 — Cuir foirm bheag le 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 glacann sé leis an label mar phrop dá chuid féin in ionad comhpháirt lipéid neadaithe — pas é uair amháin, ar Fieldagus TextInputcomhfhreagrach ó label soláthraíonn an t-ainm inrochtana.

Fíoraithe 2026-08-29: chuir dréacht roimhe sin comhpháirt Label taobh istigh de Field, rud a rindreáil dhá lipéad (ceann amháin folamh) mar go rindreálann Field a cheann féin cheana ón ionchur label prop — faighte trí bhlúire cruinn a thiomsú. An bealach An bealach comhshuite foirm teagmhála an patrún céanna, tástáilte le fíor-thástálacha e2e agus axe.

TextInput úsáideann sé defineModel, mar sin oibríonn v-model simplí as an bhosca.

Seiceáil d'obair: rith an app agus tá an fhoirm le feiceáil nocht — go díreach mar a bhí beartaithe: tá an stíliú fós le teacht. Brúigh Tab: gluaiseann an fócas trí gach rialú, fógraítear an lipéad agus oibríonn an cur isteach. Tá an t-iompar déanta; is leatsa an cuma agus is é an chéad chéim eile é.

Céim 4 — Stíligh é

Stíligh na crúcaí aicme — .button, .text-input, .label, .field — i do bhileog stíle, nó nasc téama réamhdhéanta in index.html / nuxt.config: 

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

Céim 5 — Féach air ag obair ar fad

App samplach Nuxt an catalóg iomlán stíl-chóirithe agus léirithe, le Playwright e2e agus bonnlíne 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 chéad chéimeanna eile

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.