Koyarwar Angular — Lily Design System

Abin da za ka gina

Ƙaramin fom na tuntuɓa — fili mai lakabi, maɓallin aikawa, ɗaurin hanyoyi biyu, ainihin halayyar maɓallan rubutu da na'urar karanta allo — da farko ba tare da tsari ba, sannan da tsari, cikin kusan mintuna 10.

Kafin ka fara

Kana buƙatar git, Node 22 ko sabo, da pnpm 10 ko sabo. Kowane aikin Angular 20 yana aiki — Angular CLI ko Analog.

Mataki na 1 — Ɗauki lambar

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

Abubuwan fayiloli ne masu shimfiɗe a cikin components/ — Button.ts, TextInput.ts — kowanne abu ne mai cin gashin kansa mai samfurin cikin layi, tare da spec da story ɗinsa. Barrel ɗin index.ts yana sake fitar da kowane abu; pnpm build yana samar da fakitin Angular Package Format ta ng-packagr.

Mataki na 2 — Abu na farko naka

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

Kowane abu yana bayyana mai zaɓe lily-* kuma yana nuna sinadari mai ma'ana da ƙugiyar aji — <button class="button" type="button"> a nan. Shigarwar suna bisa sigina: label() don aria-label don gyara, className() don ƙara azuzuwa.

Mataki na 3 — Haɗa ƙaramin fom

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 yana ɗaukar lakabin da ake gani a matsayin shigarwar label nasa maimakon abin lakabi da aka saka a ciki — ka ba shi sau ɗaya, a filin, kuma lily-text-inputmai dacewa na label yana ba da suna mai sauƙin isa. Abubuwa masu kama da shigarwa suna bayyana ƙima model() don haka ɗaurin hanyoyi biyu na banana-box [(value)] yana aiki nan take — ya dace da zoneless gaba ɗaya.

An tabbatar a 2026-08-29: wani daftarin da ya gabata ya saka wani abu Label daban a cikin lily-field, wanda ya nuna lakabi biyu (ɗaya fanko) saboda lily-field tuni yana nuna nasa daga shigarwar label — an gano ta hanyar duba lambar tushe ta abun. Hanyar fom ɗin tuntuɓa da aka haɗa tsari ɗaya ne, wanda aka gwada da ainihin gwaje-gwajen e2e da axe.

Duba aikinka: gudanar da app ɗin kuma fom ɗin yana kama da maras tsari — daidai kamar yadda aka nufa: tsarin yana nan gaba. Danna Tab: mayar da hankali yana ratsa kowane abin sarrafawa, ana sanar da lakabin, kuma aikawa yana aiki. An gama halayyar; kamannin naka ne kuma shi ne mataki na gaba.

Mataki na 4 — Ba shi tsari

Ba ƙugiyoyin aji tsari — .button, .text-input, .label, .field — a cikin styles.css, ko ƙara jigon da aka shirya zuwa jerin styles a cikin angular.json / haɗa shi a cikin index.html:

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

Mataki na 5 — Kalli komai yana aiki

App ɗin misali na Angular + Analog yana nuna cikakken kundin tare da tsarin hanya na fayiloli da Vite:

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

Matakai na gaba

Jigogi — sauyawa lokacin aiki da mai taimakon theme-picker na Angular.
Masu taimakon abubuwan so — harshe da girman rubutu.
Kundin abubuwa — siffofi, ARIA da maɓallan rubutu ga kowane abu.

Tambayoyi a hanya? Shafin taimako cike yake da amsoshi — kuma idan wani mataki zai iya zama mafi bayyana, gaya mana kuma za mu gyara koyarwar da farin ciki.