Lily Design System™

Tiwtorial Angular

Cydrannau annibynnol Angular 20 — mewnbynnau signal, canfod newid OnPush, templedi mewnlin, sero NgModules, sero CSS.

Beth fyddwch chi'n ei adeiladu

Ffurflen gyswllt fach — maes â label, botwm cyflwyno, rhwymo dwyffordd, ymddygiad bysellfwrdd a darllenydd sgrin go iawn — yn noeth yn gyntaf, yna wedi'i steilio, mewn tua 10 munud.

Cyn i chi ddechrau

Mae arnoch angen git, Node 22 neu'n hwyrach, a pnpm 10 neu'n hwyrach. Mae unrhyw brosiect Angular 20 yn gweithio — Angular CLI neu Analog.

Cam 1 — Cael y cod

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

Ffeiliau gwastad yw'r cydrannau yn components/ — Button.ts, TextInput.ts — mae pob un yn gydran annibynnol â thempled mewnlin, ynghyd â'i spec a'i story. Mae'r barrel index.ts yn ailallforio pob cydran; pnpm build mae'n cynhyrchu bwndel Angular Package Format drwy ng-packagr.

Cam 2 — Eich cydran gyntaf

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

Mae pob cydran yn datgan dewisydd lily-* ac yn dangos yr elfen semantig gyda'i bachyn dosbarth — <button class="button" type="button"> yma. Mae'r mewnbynnau'n seiliedig ar signalau: label() ar gyfer aria-label i'w ddiystyru, className() i atodi dosbarthiadau.

Cam 3 — Cyfansoddi ffurflen fach

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 yn cymryd y label gweladwy fel ei fewnbwn label ei hun yn lle cydran label nythedig — pasiwch ef unwaith, ar y maes, ac mae'r lily-text-inputcyfatebol o label yn darparu'r enw hygyrch. Mae cydrannau tebyg i fewnbwn yn datgelu gwerthoedd model() felly mae rhwymo dwyffordd banana-box [(value)] yn gweithio ar unwaith — yn gydnaws â zoneless drwyddo draw.

Gwiriwyd 2026-08-29: roedd drafft cynharach yn nythu cydran Label ar wahân y tu mewn i lily-field, a oedd yn dangos dau label (un yn wag) oherwydd bod lily-field eisoes yn dangos ei un ei hun o'r mewnbwn label — darganfuwyd drwy wirio cod ffynhonnell y gydran. Y llwybr ffurflen gyswllt cyfansawdd yw'r un patrwm, wedi'i brofi gyda phrofion e2e ac axe go iawn.

Gwiriwch eich gwaith: rhedwch yr ap ac mae'r ffurflen yn edrych yn noeth — yn union fel y bwriadwyd: mae'r steilio eto i ddod. Pwyswch Tab: mae ffocws yn symud trwy bob rheolydd, caiff y label ei gyhoeddi ac mae cyflwyno'n gweithio. Mae'r ymddygiad wedi'i orffen; eich un chi yw'r olwg a dyma'r cam nesaf.

Cam 4 — Ei steilio

Steiliwch y bachau dosbarth — .button, .text-input, .label, .field — yn styles.css, neu ychwanegwch thema barod at y tabl styles yn angular.json / cysylltwch hi yn index.html: 

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

Cam 5 — Ei weld yn gweithio i gyd

Ap enghreifftiol Angular + Analog yn dangos y catalog llawn gyda llwybro seiliedig ar ffeiliau a Vite: 

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

Y camau nesaf

Cwestiynau ar y ffordd? Mae'r dudalen gymorth yn llawn atebion — ac os gellid gwneud cam yn gliriach, dywedwch wrthym a byddwn yn falch o wella'r tiwtorial.