مكونات واجهات مستخدم، مُتقنة أكثر مما يلزم.

لماذا هذه المكتبة؟

• العناصر الأصلية أولًا

  <button nuiButton> زرٌّ حقيقي. وتعمل معه النماذج ولوحة المفاتيح وقارئات الشاشة كما ينبغي، لأنه لا يُغلَّف بأي عنصر آخر.

• ورقة أنماط واحدة لأي إطار عمل

  المكونات مكتوبة بـ CSS خالص داخل طبقات التتالي (cascade layers): Angular اليوم، وReact لاحقًا، وHTML العادي دائمًا.

• الأولوية لأنماطك دائمًا

  كل شيء يأتي داخل @layer nui، لذا تتغلّب عليه أنماطك دون !important ودون معارك على خصوصية المحددات.

• إمكانية الوصول من الأساس

  يُفحَص تباين كل زوج ألوان وفق WCAG 2.2 AA عند توليد لوحة الألوان. أما التركيز ووضع الألوان المفروضة وتقليل الحركة فتُعالَج نيابةً عنك.

• قابلة للتخصيص أكثر مما يلزم

  النوابض، وتأثيرات الضغط، وحركات الظهور، وأشكال الزوايا ونصف قطرها، والكثافة: سمة واحدة للتطبيق كله، أو مُدخَل واحد لكل مكوّن، وكل ذلك مبني على رموز تصميم W3C القياسية.

• Angular الحديث

  مدخلات تعتمد على signals، ودعم zoneless، والعرض من جانب الخادم، ونقطة دخول مستقلة لكل مكوّن، فلا تحمل التطبيقات إلا ما تستورده.

استيرادان وانتهى الأمر

أضف الحزمة، واستورد ورقة الأنماط مرة واحدة، ثم استخدم المكونات داخل أي مكوّن مستقل (standalone).

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

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() {}
}