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 اور کی بورڈ۔

راستے میں سوالات ہیں؟ مدد کا صفحہ جوابات سے بھرا ہے — اور اگر کوئی مرحلہ مزید واضح ہو سکتا ہے، ہمیں بتائیں اور ہم خوشی سے ٹیوٹوریل بہتر بنائیں گے۔