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, ಮತ್ತು ಕೀಬೋರ್ಡ್.

ದಾರಿಯಲ್ಲಿ ಪ್ರಶ್ನೆಗಳಿವೆಯೇ? ಸಹಾಯ ಪುಟ ಉತ್ತರಗಳಿಂದ ತುಂಬಿದೆ — ಮತ್ತು ಯಾವುದೇ ಹಂತ ಸ್ಪಷ್ಟವಾಗಬಹುದಾದರೆ, ನಮಗೆ ತಿಳಿಸಿ ಮತ್ತು ನಾವು ಸಂತೋಷದಿಂದ ಟ್ಯುಟೋರಿಯಲ್ ಸುಧಾರಿಸುತ್ತೇವೆ.