„Angular“ vadovas — Lily Design System

Ką sukursite

Nedidelė kontaktų forma — laukas su žyma, siuntimo mygtukas, dvipusis susiejimas, tikras klaviatūros ir ekrano skaitytuvo elgesys — pirma plika, paskui apipavidalinta, per maždaug 10 minučių.

Prieš pradedant

Reikia git, Node 22 ar naujesnės ir pnpm 10 ar naujesnio. Tinka bet kuris „Angular 20“ projektas — „Angular CLI“ arba „Analog“.

1 žingsnis — Gaukite kodą

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

Komponentai yra plokščios bylos aplanke components/ — Button.ts, TextInput.ts — kiekvienas yra savarankiškas komponentas su įterptuoju šablonu, plius jo spec ir story. Barrel index.ts iš naujo eksportuoja kiekvieną komponentą; pnpm build sukuria „Angular Package Format“ paketą per ng-packagr.

2 žingsnis — Jūsų pirmasis komponentas

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

Kiekvienas komponentas deklaruoja lily-* parinkiklį ir atvaizduoja semantinį elementą su jo klasės kabliu — <button class="button" type="button"> čia. Įvestys paremtos signalais: label() elementui aria-label norint pakeisti, className() norint pridėti klasių.

3 žingsnis — Sudėkite nedidelę formą

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 priima matomą žymą kaip savo label įvestį vietoj įdėto žymos komponento — perduokite ją vieną kartą, prie lauko, o atitinkamas lily-text-inputiš label suteikia prieinamą pavadinimą. Į įvestis panašūs komponentai atveria model() reikšmes, todėl banana-box [(value)] dvipusis susiejimas veikia iš karto — visur suderinamas su zoneless.

Patikrinta 2026-08-29: ankstesnis juodraštis įdėjo atskirą Label komponentą į lily-field, todėl buvo atvaizduotos dvi žymos (viena tuščia), nes lily-field jau pats atvaizduoja savo iš label įvesties — pastebėta patikrinus komponento šaltinio kodą. Sudėtinis kontaktų formos maršrutas yra tas pats šablonas, išbandytas tikrais e2e ir axe testais.

Patikrinkite savo darbą: paleiskite programą ir forma atrodo plika — kaip ir numatyta: stilius dar laukia. Paspauskite Tab: fokusas pereina per kiekvieną valdiklį, žyma paskelbiama, o siuntimas veikia. Elgesys baigtas; išvaizda jūsų ir yra kitas žingsnis.

4 žingsnis — Apipavidalinkite

Apipavidalinkite klasių kablius — .button, .text-input, .label, .field — faile styles.cssarba pridėkite paruoštą temą į masyvą styles faile angular.json / susiekite ją faile index.html:

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

5 žingsnis — Pažiūrėkite, kaip viskas veikia

„Angular“ + „Analog“ pavyzdinė programa rodo visą katalogą su maršrutizavimu pagal bylas ir „Vite“:

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

Tolesni žingsniai

Temos — perjungimas vykdymo metu su „Angular“ pagalbininku theme-picker.
Nuostatų pagalbininkai — kalba ir teksto dydis.
Komponentų katalogas — savybės, ARIA ir klaviatūra kiekvienam komponentui.

Klausimų pakeliui? Pagalbos puslapis pilnas atsakymų — o jei kuris nors žingsnis galėtų būti aiškesnis, pasakykite mums ir mielai patobulinsime vadovą.