Tutorja tal-Angular — Lily Design System

X'se tibni

Formola żgħira ta' kuntatt — qasam b'tikketta, buttuna biex tibgħat, rbit fiż-żewġ direzzjonijiet, mġiba vera tat-tastiera u tal-qarrej tal-iskrin — l-ewwel għarwiena, imbagħad bi stil, f'madwar 10 minuti.

Qabel ma tibda

Għandek bżonn git, Node 22 jew iktar ġdid, u pnpm 10 jew iktar ġdid. Kwalunkwe proġett Angular 20 jaħdem — Angular CLI jew Analog.

Pass 1 — Ġib il-kodiċi

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

Il-komponenti huma fajls ċatti fi components/ — Button.ts, TextInput.ts — kull wieħed huwa komponent awtonomu b'mudell inline, flimkien mas-spec u l-story tiegħu. Il-barrel index.ts jerġa' jesporta kull komponent; pnpm build jipproduċi pakkett fil-format Angular Package Format permezz ta' ng-packagr.

Pass 2 — L-ewwel komponent tiegħek

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

Kull komponent jiddikjara selettur lily-* u jirrendi l-element semantiku bil-ganċ tal-klassi tiegħu — <button class="button" type="button"> hawn. L-inputs huma bbażati fuq is-sinjali: label() għal aria-label biex tissostitwixxi, className() biex iżżid klassijiet.

Pass 3 — Ikkomponi formola żgħira

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 jieħu t-tikketta viżibbli bħala label input tiegħu stess minflok komponent ta' tikketta mdaħħal — għaddiha darba, fuq il-qasam, u lily-text-inputkorrispondenti ta' label jipprovdi l-isem aċċessibbli. Il-komponenti bħall-inputs jesponu valuri model() allura banana-box [(value)] rbit fiż-żewġ direzzjonijiet jaħdem minnufih — kompatibbli ma' zoneless mill-bidu sal-aħħar.

Ivverifikat fl-2026-08-29: abbozz preċedenti daħħal komponent Label separat ġewwa lily-field, li rrendi żewġ tikketti (waħda vojta) għax lily-field diġà jirrendi tiegħu stess mill-input label — skopert billi ġie spezzjonat il-kodiċi tas-sors tal-komponent. Ir-rotta komposta tal-formola ta' kuntatt hija l-istess mudell, ittestjat b'testijiet e2e u axe veri.

Iċċekkja x-xogħol tiegħek: mexxi l-app u l-formola tidher għarwiena — eżattament kif intenzjonat: l-istil għad irid jiġi. Agħfas Tab: il-focus jgħaddi minn kull kontroll, it-tikketta tiġi mħabbra u l-ibgħat jaħdem. Il-mġiba lesta; id-dehra hija tiegħek u hija l-pass li jmiss.

Pass 4 — Agħtiha stil

Agħti stil lill-ganċijiet tal-klassi — .button, .text-input, .label, .field — fi styles.css, jew żid tema lesta mal-array styles fi angular.json / evita f' index.html:

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

Pass 5 — Ara kollox jaħdem

L-app eżempju Angular + Analog turi l-katalogu sħiħ b'rotot ibbażati fuq il-fajls u Vite:

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

Passi li jmiss

Temi — bdil waqt it-tħaddim bl-għajnuna theme-picker għal Angular.
Għajnuniet tal-preferenzi — lingwa u daqs tat-test.
Katalogu tal-komponenti — proprjetajiet, ARIA u tastiera għal kull komponent.

Mistoqsijiet matul it-triq? Il-paġna tal-għajnuna hija mimlija tweġibiet — u jekk pass jista' jkun iktar ċar, għidilna u nħossuna kuntenti ntejbu t-tutorja.