شروع کار

Needless UI با Angular 22 کار می‌کند. کامپوننت‌ها دایرکتیو‌های standalone هستند، پس ماژولی برای ایمپورت کردن وجود ندارد.

نصب

پکیج Angular را همراه با Angular Aria و CDK اضافه کنید؛ این دو رفتار صفحه‌کلید و دسترس‌پذیری را فراهم می‌کنند. استایل‌شیت هم همراه همین پکیج می‌آید.

pnpm add @needless-ui/angular @angular/aria @angular/cdk

ایمپورت استایل‌ها

استایل‌شیت را یک بار در src/styles.css ایمپورت کنید. این فایل شامل توکن‌های طراحی و همهٔ کامپوننت‌هاست.

/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';

همه‌چیز داخل @layer nui ارائه می‌شود. اگر اپ شما ریست‌های سراسری مثل a { color: inherit } دارد، آن‌ها را در لایه‌ای بگذارید که پیش از nui تعریف شده باشد تا کامپوننت‌ها را بازنویسی نکنند.

استفاده از یک کامپوننت

دایرکتیو‌های موردنیازتان را از نقطه‌های ورودشان ایمپورت کنید و به imports کامپوننت خود اضافه کنید.

import { Component } from '@angular/core';
import { NuiButton } from '@needless-ui/angular/button';

@Component({
  selector: 'app-root',
  imports: [NuiButton],
  template: `<button nuiButton (click)="save()">Save changes</button>`,
})
export class App {
  save() {}
}

گام‌های بعدی

برای دیدن نمونه‌های زنده، کامپوننت‌ها را مرور کنید، یا برای هماهنگ کردن ظاهر با برندتان راهنمای شخصی‌سازی تم را بخوانید.