Teagasc Angular

An rud a thógfaidh tú

Foirm theagmhála bheag — réimse le lipéad, cnaipe cur isteach, ceangal dhá-bhealach, fíor-iompar méarchláir agus léitheora scáileáin — nocht ar dtús, ansin stíl-chóirithe, i thart ar 10 nóiméad.

Sula dtosaíonn tú

Tá git, Node 22 nó níos nuaí, agus pnpm 10 nó níos nuaí ag teastáil uait. Oibríonn aon tionscadal Angular 20 — Angular CLI nó Analog.

Céim 1 — Faigh an cód

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

Is comhaid chothroma iad na comhpháirteanna i components/ — Button.ts, TextInput.ts — is comhpháirt neamhspleách é gach ceann le teimpléad inlíne, móide a spec agus a scéal. Athéascraíonn an barrel index.ts gach comhpháirt; pnpm build táirgeann sé beart Angular Package Format trí ng-packagr.

Céim 2 — Do chéad chomhpháirt

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

Dearbhaíonn gach comhpháirt roghnóir lily-* agus rindreálann sí an eilimint shéimeantach lena crúca aicme — <button class="button" type="button"> anseo. Tá na hionchuir bunaithe ar chomharthaí: label() le haghaidh aria-label chun sárú, className() chun aicmí a chur leis.

Céim 3 — Cuir foirm bheag le chéile

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 glacann sé leis an lipéad infheicthe mar label ionchur dá chuid féin in ionad comhpháirt lipéid neadaithe — pas é uair amháin, ar an réimse, agus soláthraíonn an lily-text-inputcomhfhreagrach ó label an t-ainm inrochtana. Nochtann comhpháirteanna cosúil le hionchuir luachanna model() mar sin oibríonn ceangal dhá-bhealach banana-box [(value)] láithreach — comhoiriúnach le zoneless ar fad.

Céim 4 — Stíligh é

Stíligh na crúcaí aicme — .button, .text-input, .label, .field — in styles.css, nó cuir téama réamhdhéanta leis an eagar styles in angular.json / nasc é in index.html:

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

Céim 5 — Féach air ag obair ar fad

App samplach Angular + Analog taispeánann sé an catalóg iomlán le ródú bunaithe ar chomhaid agus Vite:

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

Na chéad chéimeanna eile

• Téamaí — malartú ag am rite leis an gcúntóir theme-picker d'Angular.
• Cúntóirí sainroghanna — teanga agus méid téacs.
• Catalóg na gcomhpháirteanna — airíonna, ARIA agus méarchlár in aghaidh na comhpháirte.

Ceisteanna ar an mbealach? Tá an leathanach cabhrach lán de fhreagraí — agus más féidir céim a dhéanamh níos soiléire, inis dúinn agus déanfaimid an teagasc a fheabhsú go sásta.