شروع کار

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

نصب

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

ng add @needless-ui/angular

اگر ترجیح می‌دهید راه‌اندازی را به‌صورت دستی انجام دهید، پکیج‌ها را اضافه کنید و سپس استایل‌ها را همان‌طور که در ادامه آمده است ایمپورت کنید.

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

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

استایل‌شیت یک بار در ابتدای src/styles.css ایمپورت می‌شود، همان جایی که ng add آن را قرار می‌دهد. در استایل‌شیت‌های Sass، به‌جای آن @use '@needless-ui/css'; را بنویسید. استایل‌شیت Needless UI شامل توکن‌های طراحی و همهٔ کامپوننت‌هاست.

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

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

اگر از Tailwind CSS استفاده می‌کنید، nui را پس از لایهٔ base در Tailwind و پیش از یوتیلیتی‌های آن تعریف کنید: در این صورت ریست Tailwind نمی‌تواند کامپوننت‌ها را بازنویسی کند و کلاس‌های یوتیلیتی همچنان بر آن‌ها اولویت دارند. ng add اگر Tailwind را پیدا کند، همین کار را خودش انجام می‌دهد.

/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';

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

دایرکتیو‌های موردنیازتان را از نقطه‌های ورودشان ایمپورت کنید و به 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() {}
}

گام‌های بعدی

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