البدء

تعمل 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';. وتتضمن ورقة الأنماط رموز التصميم وجميع المكونات.

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

كل شيء يأتي داخل @layer nui. فإذا كان في تطبيقك أنماط إعادة ضبط عامة مثل a { color: inherit }، فضعها في طبقة مُعرَّفة قبل nui حتى لا تتغلّب على المكونات.

إذا كنت تستخدم Tailwind CSS، فعرّف nui بعد طبقة base الخاصة بـ Tailwind وقبل طبقة الأدوات (utilities) فيه: عندها لا تتغلّب أنماط إعادة الضبط في Tailwind على المكونات، وتظل أصناف الأدوات (utility classes) تتغلّب عليها. ويتولى 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() {}
}

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

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