Vue eğitimi — Lily Design System

Ne oluşturacaksınız

Küçük bir iletişim formu — etiketli girdi, gönder düğmesi, v-model bağlama, gerçek klavye ve ekran okuyucu davranışı — önce çıplak, sonra biçimlendirilmiş olarak, yaklaşık 10 dakikada.

Başlamadan önce

git, Node 22 veya üstü ve pnpm 10 veya üstü gerekir. Herhangi bir Vue 3 projesi olur — Nuxt, Vite veya düz Vue.

Adım 1 — Kodu edinin

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

Bileşenler şurada düz dosyalar olarak durur: components/ — Button.vue, TextInput.vue — her birinin testi, story'si ve belgeleri yanındadır. İhtiyacınız olan dosyaları kopyalayın ya da depoyu getirin.

Adım 2 — İlk bileşeniniz

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

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

Şunu işler: <button class="button" type="button">. Prop'lar diğer çerçevelerle aynıdır: type, disabled, pressed, label, artı geri kalan her şey için öznitelik aktarımı.

Adım 3 — Küçük bir form oluşturun

<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 görünür label kendi prop'u olarak alır, iç içe bir etiket bileşeni olarak değil — bir kez geçirin, Fieldve TextInputile eşleşen label erişilebilir adı sağlar.

2026-08-29'da doğrulandı: önceki bir taslak Label içinde Fieldbileşeni yerleştirmişti; bu da iki etiket (biri boş) işlenmesine yol açtı, çünkü Field kendi etiketini zaten label prop'u — tam kod parçası derlenerek yakalandı. Şu rota: Bileşik iletişim formu rotası aynı kalıptır ve gerçek e2e ve axe testleriyle sınanır.

TextInput şunu kullanır: defineModel, bu yüzden düz v-model kutudan çıktığı gibi çalışır.

Çalışmanızı kontrol edin: uygulamayı çalıştırın; form sade görünür — tam olarak amaçlandığı gibi: biçimlendirme henüz ileride. Şuna basın: Tab: odak her denetimde ilerler, etiket duyurulur ve gönderme çalışır. Davranış tamam; görünüm sizin ve sıradaki adım.

Adım 4 — Biçimlendirin

Sınıf kancalarını biçimlendirin — .button, .text-input, .label, .field — stil sayfanızda ya da hazır bir temayı şurada bağlayın: index.html / nuxt.config:

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

Adım 5 — Hepsinin çalıştığını görün

Nuxt örnek uygulaması tüm kataloğu biçimli ve demolu olarak, Playwright e2e ve axe-core taban çizgisiyle sunar:

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

Sonraki adımlar

Temalar — Vue theme-picker yardımcısıyla çalışma anında geçiş.
Tercih yardımcıları — dil ve metin boyutu.
Bileşen kataloğu — bileşen başına özellikler, ARIA ve klavye.

Yol boyunca sorunuz mu var? Yardım sayfası yanıtlarla dolu — ve bir adım daha açık olabilirse, bize söyleyin ve eğitimi memnuniyetle iyileştirelim.