Angular tutoriala — Lily Design System

Zer eraikiko duzun

Harremanetarako formulario txiki bat — etiketadun sarrera, bidaltze-botoia, bi norabideko lotura, teklatu eta pantaila-irakurgailu portaera erreala — lehenik biluzik, gero estilatuta, 10 minutu inguruan.

Hasi aurretik

git, Node 22 edo berriagoa eta pnpm 10 edo berriagoa behar dituzu. Edozein Angular 20 proiektuk balio du — Angular CLI edo Analog.

1. pausoa — Lortu kodea

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

Osagaiak fitxategi lau gisa daude hemen: components/ — Button.ts, TextInput.ts — bakoitza txantiloi txertatua duen osagai autonomoa da, bere spec eta story-arekin. Barrel-ak index.ts osagai guztiak berresportatzen ditu; pnpm build Angular Package Format bundle bat sortzen du ng-packagr bidez.

2. pausoa — Zure lehen osagaia

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

Osagai bakoitzak lily-* hautatzaile bat deklaratzen du eta elementu semantikoa errendatzen du bere klase-gakoarekin — <button class="button" type="button"> hemen. Sarrerak seinaleetan oinarrituak dira: label() honetarako: aria-label gainidazteko, className() klaseak gehitzeko.

3. pausoa — Osatu formulario txiki bat

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 etiketa ikusgarria bere label sarrera gisa hartzen du, etiketa-osagai habiaratu gisa baino — eman behin, eremuan, eta dagokion lily-text-input-ak label izen irisgarria ematen du. Sarrera-itxurako osagaiek model() balioak erakusten dituzte, beraz banana-box [(value)] bi norabideko loturak berehala funtzionatzen du — zoneless-ekin bateragarria osoan zehar.

2026-08-29an egiaztatua: aurreko zirriborro batek Label osagai bereizi bat habiaratzen zuen lily-fieldbarruan, eta honek bi etiketa errendatzen zituen (bat hutsik) zeren lily-field -k jada bere etiketa errendatzen baitu label sarreratik — osagaiaren iturburua begiratuz atzeman zen. harremanetarako formulario konposatuaren ibilbideak patroi bera du, benetako e2e eta axe probekin erabilia.

Egiaztatu zure lana: exekutatu aplikazioa eta formularioa soila ageri da — hain zuzen nahi bezala: estiloa oraindik aurrean dago. Sakatu Tab: fokua kontrol guztietatik pasatzen da, etiketa iragartzen da eta bidalketak funtzionatzen du. Portaera prest dago; itxura zurea da eta hurrengoa da.

4. pausoa — Estilatu

Estilatu klase-gakoak — .button, .text-input, .label, .field — hemen: styles.css, edo gehitu prest dagoen gai bat styles array-ra angular.json hemen / lotu hemen: index.html:

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

5. pausoa — Ikusi dena funtzionatzen

Angular + Analog adibide-aplikazioak katalogo osoa erakusten du fitxategietan oinarritutako bideratzearekin eta Vite-rekin:

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

Hurrengo pausoak

Gaiak — exekuzio-garaiko aldaketa Angular theme-picker laguntzailearekin.
Lehentasun-laguntzaileak — hizkuntza eta testu-tamaina.
Osagai-katalogoa — osagai bakoitzaren propak, ARIA eta teklatua.

Galderarik bidean? laguntza-orriak erantzunez beteta dago — eta pauso bat argiagoa izan badaiteke, esan iezaguzu eta pozik hobetuko dugu tutoriala.