Angular-veiledning — Lily Design System

Hva du skal bygge

Et lite kontaktskjema — et inndatafelt med etikett, en send-knapp, toveis binding, ekte tastatur- og skjermleseroppførsel — først bart, så stilet, på omtrent 10 minutter.

Før du begynner

Du trenger git, Node 22 eller nyere og pnpm 10 eller nyere. Ethvert Angular 20-prosjekt fungerer — Angular CLI eller Analog.

Steg 1 — Hent koden

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

Komponentene er flate filer i components/ — Button.ts, TextInput.ts — hver en frittstående komponent med innebygd mal, pluss spec og story. Barrelen index.ts re-eksporterer hver komponent; pnpm build produserer en Angular Package Format-pakke via ng-packagr.

Steg 2 — Din første komponent

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

Hver komponent deklarerer en lily-* velger og gjengir det semantiske elementet med sin klassekrok — <button class="button" type="button"> her. Inndata er signalbaserte: label() for en aria-label overstyring, className() for å legge til klasser.

Steg 3 — Sett sammen et lite skjema

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 tar den synlige etiketten som sin egen label inndata i stedet for en nøstet etikettkomponent — send den inn én gang, på feltet, og den tilhørende lily-text-inputpå label gir det tilgjengelige navnet. Inndatalignende komponenter eksponerer model() verdier, så banana-box [(value)] toveis binding bare fungerer — soneløs-kompatibel hele veien.

Verifisert 2026-08-29: et tidligere utkast nøstet en separat Label komponent inni lily-field, som gjengir to etiketter (én tom) fordi lily-field allerede gjengir sin egen fra label inndata — oppdaget ved å sjekke komponentkilden. Den sammensatte kontaktskjema-ruten er det samme mønsteret, prøvd med ekte e2e- og axe-tester.

Sjekk arbeidet ditt: kjør appen, og skjemaet ser enkelt ut — akkurat som tiltenkt: stilingen ligger fortsatt foran. Trykk Tab: fokus beveger seg gjennom hver kontroll, etiketten kunngjøres og innsending fungerer. Oppførselen er ferdig; utseendet er ditt og er neste.

Steg 4 — Stil det

Stil klassekrokene — .button, .text-input, .label, .field — i styles.css, eller legg et ferdig tema til styles -arrayet i angular.json / lenk det i index.html:

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

Steg 5 — Se alt fungere

Angular + Analog-eksempelappen viser hele katalogen med filbasert ruting og Vite:

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

Neste steg

Tema — bytte ved kjøretid med Angular theme-picker-hjelperen.
Preferansehjelpere — språk og tekststørrelse.
Komponentkatalog — egenskaper, ARIA og tastatur per komponent.

Spørsmål underveis? hjelpesiden er full av svar — og hvis et steg kan bli tydeligere, fortell oss så forbedrer vi gjerne veiledningen.