Lily Design System™

Dyskans Angular

Darnow dre-honan Angular 20 — mewnosow-sin, ertheg chanj OnPush, skantlynyow yn-linenn, heb NgModules, heb CSS.

Pyth a wrewgh drehevel

Furv kestava byghan — mewnos gans lavell, botton danvon, kesyanns diwo-fordh, hwedhel klavyer ha skrin-redyer gwir — kynsa noeth, ena stylys, yn a-dro dhe 10 mynysenn.

Kyns dalleth

Ty a'n jeves othom a git, Node 22 po nowodhyes, ha pnpm 10 po nowodhyes. Raglen Angular 20 vyth a ober — Angular CLI po Analog.

Kamm 1 — Kevewgh an koodh

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

An darnow yw restrennow plat yn components/ — Button.ts, TextInput.ts — pub onan yw darn dre-honan gans skantlyn yn-linenn, ha'y spec ha story. An barrel index.ts a dhe-worth pub darn; pnpm build a wra pakkya Angular Package Format dre ng-packagr.

Kamm 2 — Dha dharn kynsa

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

Pub darn a styr lily-* dewisyer hag a dhyskwedh an elven dhiswelyans gans y grok klass — <button class="button" type="button"> omma. An mewnosow yw selys war sinow: label() rag aria-label gorholans, className() rag keworra klassys.

Kamm 3 — Kesstrewewgh furv byghan

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 a gemmer an lavell hewelus avel y label mewnos dha honan yn le darn lavell nessys — passewgh hi unnweyth, war an hwel, ha'n lily-text-inputkehevelys war label a re an hanow hedhesys. Darnow haval orth mewnos a dhiskwedh model() gwerthow, rag henna banana-box [(value)] kesyanns diwo-fordh a ober yn unnweyth — kesobrys gans zoneless dres-oll.

Gwiriys 2026-08-29: kynsa towl a nesas darn dyvers Label a-berth lily-field, hag a dhyskwedhas dew lavell (unn gwag) drefen lily-field seulajys a dhyskwedh y honan dhiworth an label mewnos — kefys dre hwithra fenten an darn. An fordh furv-kestava kesstrewys yw an keth patrom, previys gans e2e ha axe gwir.

Hwithrewgh dha oberenn: kerdhewgh an app ha'n furv a hevel plen — yn ewn herwydh bryntyans: an stylyans yw hwath a-rag. Gwaskewgh Tab: fokus a wayn dres pub kontroll, an lavell yw displetys, ha'n danvon a ober. An hwedhel yw gwrys; an semlant yw dhiso ha henna yw nessa.

Kamm 4 — Stylyewgh

Stylyewgh an krogow klass — .button, .text-input, .label, .field — yn styles.css, po keworrewgh tebel parys dhe'n rew styles yn angular.json / kevrewgh yn index.html: 

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

Kamm 5 — Gwelewgh pubtra ow ’oberi

An app ensampel Angular + Analog a dhyskwedh an rolyans kowl gans fordhyans herwydh restren ha Vite: 

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

Kammow nessa

Govynnow war an fordh? An folen skoodhya yw leun a worthebow — ha mar pe kamm moy splann, leverewgh dhyn ha ni a wellha an dyskans yn lowen.