Angular 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 Angular 20 projesi olur — Angular CLI veya Analog.

Adım 1 — Kodu edinin

git clone https://github.com/LilyDesignSystem/lily-design-system
cd lily-design-system/lily-design-system-angular-headless
pnpm install
pnpm test        # vitest + TestBed, all 571 components
pnpm run build-storybook

Bileşenler şurada düz dosyalar olarak durur: components/ — Button.ts, TextInput.ts — her biri satır içi şablonlu bağımsız bir bileşendir ve spec ile story dosyası yanında gelir. Barrel dosyası index.ts her bileşeni yeniden dışa aktarır; pnpm build ng-packagr ile bir Angular Package Format paketi üretir.

Adım 2 — İlk bileşeniniz

import { Component } from "@angular/core";
import { Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-save-bar",
  standalone: true,
  imports: [Button],
  template: `<lily-button (click)="save()">Save</lily-button>`,
})
export class SaveBar {
  save() { console.log("saved"); }
}

Her bileşen bir lily-* seçicisi bildirir ve anlamsal öğeyi sınıf kancasıyla işler — <button class="button" type="button"> burada. Girdiler sinyal tabanlıdır: label() için aria-label geçersiz kılmak, className() sınıf eklemek için.

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

import { Component, signal } from "@angular/core";
import { Form, Field, TextInput, Button } from "@lilydesignsystem/angular-headless";

@Component({
  selector: "app-contact-form",
  standalone: true,
  imports: [Form, Field, TextInput, Button],
  template: `
    <lily-form label="Contact form" (submit)="handleSubmit($event)">
      <lily-field label="Full name" [required]="true">
        <lily-text-input id="name" label="Full name" [(value)]="name" />
      </lily-field>
      <lily-button type="submit">Save</lily-button>
    </lily-form>
  `,
})
export class ContactForm {
  name = signal("");
}

lily-field görünür etiketi iç içe bir etiket bileşeni yerine kendi label girdisi olarak alır — alanda bir kez geçirin ve lily-text-inputile eşleşen label erişilebilir adı sağlar. Girdi benzeri bileşenler model() değerlerini açığa çıkarır, böylece banana-box [(value)] çift yönlü bağlama hemen çalışır — baştan sona zoneless uyumludur.

2026-08-29'da doğrulandı: önceki bir taslak Label içine ayrı bir lily-fieldbileşeni yerleştirmişti; bu da iki etiket (biri boş) işlenmesine yol açtı, çünkü lily-field kendi etiketini zaten label girdisinden işler — bileşen kaynağı kontrol edilerek yakalandı. 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

Sınıf kancalarını biçimlendirin — .button, .text-input, .label, .field — şurada: styles.css, ya da hazır bir temayı şu diziye ekleyin: styles içinde angular.json / şurada bağlayın: index.html:

<link rel="stylesheet" href="/themes/adobe-spectrum.css" />

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

Angular + Analog örnek uygulaması tüm kataloğu dosya tabanlı yönlendirme ve Vite ile gösterir:

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

Sonraki adımlar

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