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 తో పాటు. బ్యారెల్ index.ts ప్రతి కాంపోనెంట్‌ను తిరిగి ఎగుమతి చేస్తుంది; pnpm build ng-packagr ద్వారా Angular Package Format బండిల్‌ను తయారు చేస్తుంది.

దశ 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"> ఇక్కడ. ఇన్‌పుట్‌లు సిగ్నల్ ఆధారితమైనవి: 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

తదుపరి దశలు

• థీమ్‌లు — Angular theme-picker సహాయకంతో రన్‌టైమ్‌లో మార్చడం.
• ప్రాధాన్యత సహాయకాలు — భాష మరియు టెక్స్ట్ పరిమాణం.
• కాంపోనెంట్ కేటలాగ్ — ప్రతి కాంపోనెంట్‌కు లక్షణాలు, ARIA మరియు కీబోర్డ్.

దారిలో ప్రశ్నలా? సహాయ పేజీ సమాధానాలతో నిండి ఉంది — మరియు ఏదైనా దశను మరింత స్పష్టంగా చేయవచ్చంటే, మాకు చెప్పండి మరియు మేము సంతోషంగా ట్యుటోరియల్‌ను మెరుగుపరుస్తాము.