Návod pre Angular — Lily Design System

Čo vytvoríte

Malý kontaktný formulár — pole s popisom, tlačidlo odoslať, obojsmerná väzba, skutočné správanie klávesnice a čítačky obrazovky — najprv holý, potom ostylovaný, približne za 10 minút.

Skôr než začnete

Potrebujete git, Node 22 alebo novší a pnpm 10 alebo novší. Hodí sa akýkoľvek projekt Angular 20 — Angular CLI alebo Analog.

Krok 1 — Získajte kód

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

Komponenty sú ploché súbory v components/ — Button.ts, TextInput.ts — každý je samostatný komponent s vloženou šablónou, plus jeho spec a story. Barrel index.ts znova exportuje každý komponent; pnpm build vytvára balík vo formáte Angular Package Format cez ng-packagr.

Krok 2 — Váš prvý komponent

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"); }
}

Každý komponent deklaruje selektor lily-* a vykresľuje sémantický prvok s jeho triednym háčikom — <button class="button" type="button"> tu. Vstupy sú založené na signáloch: label() pre aria-label na prepísanie, className() na pridanie tried.

Krok 3 — Zložte malý formulár

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 prijíma viditeľný popis ako vlastný label vstup namiesto vnoreného komponentu popisu — odovzdajte ho raz, pri poli, a zodpovedajúci lily-text-inputz label poskytne prístupný názov. Komponenty podobné vstupom zverejňujú hodnoty model() takže banana-box [(value)] obojsmerná väzba funguje hneď — kompatibilné so zoneless v celom rozsahu.

Overené 2026-08-29: skorší koncept vnáral samostatný komponent Label dovnútra lily-field, čo vykreslilo dva popisy (jeden prázdny), pretože lily-field už vykresľuje svoj vlastný zo vstupu label — zistené kontrolou zdrojového kódu komponentu. Zložená trasa kontaktného formulára je rovnaký vzor, preverený skutočnými testami e2e a axe.

Skontrolujte svoju prácu: spustite aplikáciu a formulár vyzerá holo — presne podľa zámeru: štýlovanie ešte len príde. Stlačte Tab: fokus prechádza každým ovládacím prvkom, popis sa oznamuje a odoslanie funguje. Správanie je hotové; vzhľad je váš a je ďalším krokom.

Krok 4 — Ostylujte ho

Ostylujte triedne háčiky — .button, .text-input, .label, .field — v styles.css, alebo pridajte hotovú tému do poľa styles v angular.json / pripojte ju v index.html:

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

Krok 5 — Pozrite sa, ako to celé funguje

Ukážková aplikácia Angular + Analog ukazuje celý katalóg s routovaním založeným na súboroch a Vite:

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

Ďalšie kroky

Témy — prepínanie za behu pomocníkom theme-picker pre Angular.
Pomocníci pre predvoľby — jazyk a veľkosť textu.
Katalóg komponentov — vlastnosti, ARIA a klávesnica pre každý komponent.

Otázky po ceste? Stránka pomocníka je plná odpovedí — a ak by niektorý krok mohol byť jasnejší, dajte nám vedieť a návod radi vylepšíme.