Svelte eğitimi — Lily Design System

Ne oluşturacaksınız

Küçük bir iletişim formu — etiketli girdi, gönder düğmesi, çift yönlü 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 Svelte 5 projesi olur — yepyeni bir npx sv create uygulama yeterlidir.

Adım 1 — Kodu edinin

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-svelte-headless
pnpm install
pnpm test        # vitest — thousands of component cases
pnpm run storybook   # browse all 571 components

Bileşenler şurada bulunur: src/lib/components/{Name}/, bileşen başına bir dizin; içinde .svelte dosyası, testleri, story'leri ve belgeleri yan yana durur. İhtiyacınız olan dizinleri uygulamanıza kopyalayın ya da depoya bağımlı olup doğrudan içe aktarın.

Adım 2 — İlk bileşeniniz

<script>
  import Button from "#lib/components/Button/Button.svelte";

  function save() { console.log("saved"); }
</script>

<Button onclick={save}>Save</Button>

Şunu işler: <button class="button" type="button">. Prop'lar tiplidir: type, disabled, pressed (şunu işler: aria-pressed (şunu işler: label ( aria-label geçiş düğmeleri için),

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

<script>
  import Form from "#lib/components/Form/Form.svelte";
  import Field from "#lib/components/Field/Field.svelte";
  import TextInput from "#lib/components/TextInput/TextInput.svelte";
  import Button from "#lib/components/Button/Button.svelte";

  let name = $state("");
</script>

<Form label="Contact form" onsubmit={handleSubmit}>
  <Field label="Full name" required>
    <TextInput id="name" label="Full name" bind:value={name} required />
  </Field>
  <Button type="submit">Save</Button>
</Form>

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. TextInput's value geçersiz kılmak için) ve fazladan her öznitelik köke yayılır. $bindable bir bind:value rune prop'udur, dolayısıyla

2026-08-29'da doğrulandı: size hemen çift yönlü bağlama verir. svelte/server tam bu kod parçası şunun içinden derlendi: <label for> ve tek, doğru bağlanmış etiket için denetlendi Label içinde Field— önceki bir taslak ayrı bir iki etiket (biri boş) işlenmesine yol açtı, çünkü Field kendi etiketini zaten label iç içe yerleştirmişti; bu da şunun işlenmesine yol açtı: Bileşik iletişim formu rotası aynı kalıptır ve gerçek e2e ve axe testleriyle sınanı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

Yukarıdaki her şey saf yapı olarak işlenir, stillerinize hazırdır. Sınıf kancalarını biçimlendirin — .button, .text-input, .label, .field — genel stil sayfanızda ya da hazır bir temayı şurada bağlayın: app.html:

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

Örnek başına ince ayarlar şuradan geçer: class prop'u, temel kancaya ekler: <Button class="wide"> şunu işler: class="button wide".

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

SvelteKit örnek uygulaması aynı kataloğun tam biçimlendirilmiş hâlidir; canlı demolar, Playwright e2e testleri ve axe-core erişilebilirlik taban çizgisi içerir:

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

Sonraki adımlar

Temalar — Svelte 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.