Οδηγός Angular

Τι θα φτιάξετε

Μια μικρή φόρμα επικοινωνίας — πεδίο με ετικέτα, κουμπί υποβολής, αμφίδρομη δέσμευση, πραγματική συμπεριφορά πληκτρολογίου και προγράμματος ανάγνωσης οθόνης — πρώτα γυμνή, μετά μορφοποιημένη, σε περίπου 10 λεπτά.

Πριν ξεκινήσετε

Χρειάζεστε git, Node 22 ή νεότερο και pnpm 10 ή νεότερο. Κάθε έργο Angular 20 κάνει — Angular CLI ή Analog.

Βήμα 1 — Πάρτε τον κώδικα

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

Τα στοιχεία είναι επίπεδα αρχεία στο components/ — Button.ts, TextInput.ts — καθένα είναι αυτόνομο στοιχείο με ενσωματωμένο πρότυπο, μαζί με το spec και το story του. Το barrel index.ts επανεξάγει κάθε στοιχείο· pnpm build παράγει πακέτο Angular Package Format μέσω ng-packagr.

Βήμα 2 — Το πρώτο σας στοιχείο

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

Κάθε στοιχείο δηλώνει έναν επιλογέα lily-* και αποδίδει το σημασιολογικό στοιχείο με το αγκίστρι κλάσης του — <button class="button" type="button"> εδώ. Οι είσοδοι βασίζονται σε signals: label() για ένα aria-label για παράκαμψη, className() για προσθήκη κλάσεων.

Βήμα 3 — Συνθέστε μια μικρή φόρμα

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 παίρνει την ορατή ετικέτα ως δική του label είσοδο αντί για ένθετο στοιχείο ετικέτας — περάστε την μία φορά, στο πεδίο, και το αντίστοιχο lily-text-inputτου label δίνει το προσβάσιμο όνομα. Τα στοιχεία τύπου εισόδου εκθέτουν τιμές model() έτσι η αμφίδρομη δέσμευση banana-box [(value)] δουλεύει αμέσως — συμβατή με zoneless σε όλη την έκταση.

Βήμα 4 — Μορφοποιήστε την

Μορφοποιήστε τα αγκίστρια κλάσης — .button, .text-input, .label, .field — στο styles.css, ή προσθέστε ένα έτοιμο θέμα στον πίνακα styles στο angular.json / συνδέστε το στο index.html:

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

Βήμα 5 — Δείτε τα πάντα να δουλεύουν

Η εφαρμογή-παράδειγμα Angular + Analog δείχνει ολόκληρο τον κατάλογο με δρομολόγηση βάσει αρχείων και Vite:

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

Επόμενα βήματα

• Θέματα — εναλλαγή κατά την εκτέλεση με τον βοηθό theme-picker για Angular.
• Βοηθοί προτιμήσεων — γλώσσα και μέγεθος κειμένου.
• Κατάλογος στοιχείων — ιδιότητες, ARIA και πληκτρολόγιο ανά στοιχείο.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.