البدء

تعمل 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() {}
}

الخطوات التالية

تصفّح المكونات لرؤية أمثلة حية، أو اقرأ دليل تخصيص المظهر لتُكيّف المكونات مع هويتك البصرية.