Mafunzo ya Angular — Lily Design System

Utakachojenga

Fomu ndogo ya mawasiliano — pembejeo yenye lebo, kitufe cha kutuma, uunganishaji wa pande mbili, tabia halisi ya kibodi na kisomaji skrini — kwanza bila mapambo, kisha ikiwa na mapambo, kwa takriban dakika 10.

Kabla ya kuanza

Unahitaji git, Node 22 au zaidi, na pnpm 10 au zaidi. Mradi wowote wa Angular 20 unafaa — Angular CLI au Analog.

Hatua ya 1 — Pata msimbo

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

Vipengele ni faili tambarare katika components/ — Button.ts, TextInput.ts — kila kimoja ni kipengele huru chenye kiolezo kilichopachikwa, pamoja na spec na hadithi yake. Pipa index.ts hutoa tena kila kipengele; pnpm build huzalisha kifurushi cha Angular Package Format kupitia ng-packagr.

Hatua ya 2 — Kipengele chako cha kwanza

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

Kila kipengele hutangaza kichaguzi cha lily-* na huonyesha kipengele cha kisemantiki chenye kishikio chake cha darasa — <button class="button" type="button"> hapa. Pembejeo zinatokana na mawimbi: label() kwa aria-label kubatilisha, className() kuongeza madarasa.

Hatua ya 3 — Unda fomu ndogo

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 huchukua lebo inayoonekana kama label pembejeo yake yenyewe badala ya kipengele cha lebo kilichowekwa ndani — ipitishe mara moja, kwenye sehemu, na lily-text-inputinayolingana label hutoa jina linalofikika. Vipengele vinavyofanana na pembejeo hufichua thamani za model() hivyo banana-box [(value)] uunganishaji wa pande mbili hufanya kazi tu — vinaoana na zoneless kote.

Imethibitishwa 2026-08-29: rasimu ya awali iliweka kipengele tofauti cha Label ndani ya lily-field, ambacho kilionyesha mbili lebo (moja tupu) kwa sababu lily-field tayari huonyesha lebo yake yenyewe kutoka kwenye label pembejeo — ilibainika kwa kukagua chanzo cha kipengele. Njia ya fomu ya mawasiliano iliyounganishwa ni mchoro uleule, uliojaribiwa kwa majaribio halisi ya e2e na axe.

Hakiki kazi yako: endesha programu na fomu inaonekana ya kawaida — kama ilivyokusudiwa: mapambo bado yanakuja. Bonyeza Tab: umakini husogea kwenye kila kidhibiti, lebo inatangazwa, na kutuma kunafanya kazi. Tabia imekamilika; mwonekano ni wako, na ndio unaofuata.

Hatua ya 4 — Ipambe

Pamba vishikio vya darasa — .button, .text-input, .label, .field — katika styles.css, au ongeza mandhari yaliyo tayari kwenye safu ya styles katika angular.json / iunganishe katika index.html:

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

Hatua ya 5 — Ona kila kitu kikifanya kazi

Programu ya mifano ya Angular + Analog inaonyesha orodha kamili ikiwa na uelekezaji wa faili na Vite:

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

Hatua zinazofuata

Mandhari — kubadili wakati wa utekelezaji kwa kisaidizi cha theme-picker cha Angular.
Visaidizi vya mapendeleo — lugha na ukubwa wa maandishi.
Orodha ya vipengele — sifa, ARIA, na kibodi kwa kila kipengele.

Una maswali njiani? Ukurasa wa msaada umejaa majibu — na kama hatua inaweza kuwa wazi zaidi, tuambie na tutafurahi kuboresha mafunzo.