Lily Design System™

Tiwtorial Vue

Cydrannau ffeil sengl Vue 3 gyda props teipiedig, defineModel rhwymo dwyffordd, a phasio v-bind="$attrs" drwodd.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach — maes â label, botwm cyflwyno, v-model rhwymo, ymddygiad bysellfwrdd a darllenydd sgrin go iawn — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen git, Node 22 neu'n hwyrach, a pnpm 10 neu'n hwyrach. Mae unrhyw brosiect Vue 3 yn gweithio — Nuxt, Vite neu Vue syml.

Cam 1 — Cael y cod

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

Ffeiliau gwastad yw'r cydrannau yn components/ — Button.vue, TextInput.vue — pob un â'i brawf, ei story a'i ddogfennaeth wrth ei ochr. Copïwch y ffeiliau sydd eu hangen arnoch, neu tynnwch y gadwrfa i mewn.

Cam 2 — Eich cydran gyntaf

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

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

Yn dangos <button class="button" type="button">. Mae'r props yn cyfateb i'r fframweithiau eraill: type, disabled, pressed, label, ynghyd â threiddio priodoleddau ar gyfer popeth arall.

Cam 3 — Cyfansoddi ffurflen fach

<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 yn cymryd y label fel ei prop ei hun yn lle cydran label nythedig — pasiwch ef unwaith, ar Fielda TextInputcyfatebol o label yn darparu'r enw hygyrch.

Gwiriwyd 2026-08-29: roedd drafft cynharach yn nythu cydran Label y tu mewn i Field, a oedd yn dangos dau label (un yn wag) oherwydd bod Field eisoes yn dangos ei un ei hun o'r mewnbwn label prop — darganfuwyd drwy lunio'r darn yn union. Y llwybr Y llwybr ffurflen gyswllt cyfansawdd yw'r un patrwm, wedi'i brofi gyda phrofion e2e ac axe go iawn.

TextInput yn defnyddio defineModel, felly mae v-model syml yn gweithio'n syth.

Gwiriwch eich gwaith: rhedwch yr ap ac mae'r ffurflen yn edrych yn noeth — yn union fel y bwriadwyd: mae'r steilio eto i ddod. Pwyswch Tab: mae ffocws yn symud trwy bob rheolydd, caiff y label ei gyhoeddi ac mae cyflwyno'n gweithio. Mae'r ymddygiad wedi'i orffen; eich un chi yw'r olwg a dyma'r cam nesaf.

Cam 4 — Ei steilio

Steiliwch y bachau dosbarth — .button, .text-input, .label, .field — yn eich taflen arddull, neu cysylltwch thema barod yn index.html / nuxt.config: 

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

Cam 5 — Ei weld yn gweithio i gyd

Ap enghreifftiol Nuxt yw'r catalog llawn wedi'i steilio a'i ddangos, gyda Playwright e2e a llinell sylfaen 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

Y camau nesaf

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.