Angular apmācība — Lily Design System

Ko jūs izveidosiet

Neliela kontaktu veidlapa — lauks ar iezīmi, iesniegšanas poga, divvirzienu saistīšana, īsta tastatūras un ekrāna lasītāja darbība — vispirms kaila, tad noformēta, apmēram 10 minūtēs.

Pirms sākat

Nepieciešams git, Node 22 vai jaunāks un pnpm 10 vai jaunāks. Der jebkurš Angular 20 projekts — Angular CLI vai Analog.

1. solis — Iegūstiet kodu

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

Komponentes ir plakanas datnes direktorijā components/ — Button.ts, TextInput.ts — katra ir patstāvīga komponente ar iebūvētu veidni, plus tās spec un story. Barrel index.ts atkārtoti eksportē katru komponenti; pnpm build izveido Angular Package Format paku ar ng-packagr.

2. solis — Jūsu pirmā komponente

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

Katra komponente deklarē lily-* selektoru un attēlo semantisko elementu ar tās klases āķi — <button class="button" type="button"> šeit. Ievades ir balstītas uz signāliem: label() elementam aria-label lai pārrakstītu, className() lai pievienotu klases.

3. solis — Salieciet nelielu veidlapu

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 pieņem redzamo iezīmi kā savu label ievadi, nevis iekļautu iezīmes komponenti — nododiet to vienreiz, pie lauka, un atbilstošais lily-text-inputno label nodrošina pieejamo nosaukumu. Ievadēm līdzīgas komponentes atklāj model() vērtības, tāpēc banana-box [(value)] divvirzienu saistīšana darbojas uzreiz — visur saderīga ar zoneless.

Pārbaudīts 2026-08-29: agrāks melnraksts iekļāva atsevišķu Label komponenti iekšā lily-field, kas attēloja divas iezīmes (vienu tukšu), jo lily-field jau pati attēlo savu no label ievades — atklāts, pārbaudot komponentes pirmkodu. Salikto kontaktu veidlapas maršrutu ir tas pats modelis, pārbaudīts ar īstiem e2e un axe testiem.

Pārbaudiet savu darbu: palaidiet lietotni, un veidlapa izskatās kaila — tieši kā paredzēts: noformēšana vēl priekšā. Nospiediet Tab: fokuss iet cauri katrai vadīklai, iezīme tiek paziņota, un iesniegšana darbojas. Uzvedība ir gatava; izskats ir jūsu un ir nākamais solis.

4. solis — Noformējiet to

Noformējiet klases āķus — .button, .text-input, .label, .field — failā styles.cssvai pievienojiet gatavu motīvu masīvam styles failā angular.json / saistiet to failā index.html:

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

5. solis — Redziet, kā viss darbojas

Angular + Analog paraugu lietotne rāda pilnu katalogu ar failu balstītu maršrutēšanu un Vite:

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

Nākamie soļi

Motīvi — pārslēgšana izpildes laikā ar Angular palīgu theme-picker.
Preferenču palīgi — valoda un teksta izmērs.
Komponenšu katalogs — īpašības, ARIA un tastatūra katrai komponentei.

Jautājumi pa ceļam? Palīdzības lapa ir pilna atbilžu — un, ja kāds solis varētu būt skaidrāks, pastāstiet mums un mēs labprāt uzlabosim apmācību.