Vodnik za Angular — Lily Design System

Kaj boste ustvarili

Majhen kontaktni obrazec — polje z oznako, gumb za pošiljanje, dvosmerna vezava, resnično vedenje tipkovnice in bralnika zaslona — najprej gol, nato oblikovan, v približno 10 minutah.

Preden začnete

Potrebujete git, Node 22 ali novejši in pnpm 10 ali novejši. Primeren je vsak projekt Angular 20 — Angular CLI ali Analog.

Korak 1 — Pridobite kodo

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

Komponente so ravne datoteke v components/ — Button.ts, TextInput.ts — vsaka je samostojna komponenta z vgrajeno predlogo, poleg tega njen spec in story. Barrel index.ts znova izvozi vsako komponento; pnpm build ustvari paket v formatu Angular Package Format prek ng-packagr.

Korak 2 — Vaša prva komponenta

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

Vsaka komponenta deklarira izbirnik lily-* in izriše semantični element z njegovim razrednim kavljem — <button class="button" type="button"> tukaj. Vhodi temeljijo na signalih: label() za aria-label za preglasitev, className() za dodajanje razredov.

Korak 3 — Sestavite majhen obrazec

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 sprejme vidno oznako kot svoj label vhod namesto gnezdene komponente oznake — posredujte jo enkrat, pri polju, ustrezni lily-text-inputiz label pa zagotovi dostopno ime. Komponente, podobne vhodom, izpostavljajo vrednosti model() zato banana-box [(value)] dvosmerna vezava deluje takoj — zoneless-združljivo v celoti.

Preverjeno 2026-08-29: prejšnji osnutek je gnezdil ločeno komponento Label znotraj lily-field, kar je izrisalo dve oznaki (eno prazno), ker lily-field že izriše svojo iz vhoda label — odkrito s pregledom izvorne kode komponente. Sestavljena pot kontaktnega obrazca je isti vzorec, preizkušen z resničnimi testi e2e in axe.

Preverite svoje delo: zaženite aplikacijo in obrazec je videti gol — natanko kot je bilo načrtovano: oblikovanje šele sledi. Pritisnite Tab: fokus gre skozi vsak kontrolnik, oznaka se izgovori in pošiljanje deluje. Vedenje je končano; videz je vaš in je naslednji korak.

Korak 4 — Oblikujte ga

Oblikujte razredne kavlje — .button, .text-input, .label, .field — v styles.cssali dodajte že pripravljeno temo v polje styles v angular.json / povežite jo v index.html:

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

Korak 5 — Poglejte, kako vse deluje

Vzorčna aplikacija Angular + Analog prikazuje celoten katalog z usmerjanjem na podlagi datotek in Vite:

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

Naslednji koraki

Teme — preklapljanje med izvajanjem s pomočnikom theme-picker za Angular.
Pomočniki za nastavitve — jezik in velikost besedila.
Katalog komponent — lastnosti, ARIA in tipkovnica za vsako komponento.

Vprašanja na poti? Stran s pomočjo je polna odgovorov — in če bi bil kakšen korak lahko jasnejši, sporočite nam in vodnik bomo z veseljem izboljšali.