Needless UI

متن‌باز · Angular 22 · مجوز MIT

کامپوننت‌های رابط کاربری، دقیق‌تر از آنچه لازم است.

Needless UI با یک استایل‌شیت مستقل از فریم‌ورک و توکن‌های طراحی W3C به عناصر بومی استایل می‌دهد. دایرکتیو‌های Angular آن رفتار تعاملی را از Angular Aria می‌آورند؛ برای همین هر کامپوننت از همان رندر اول دسترس‌پذیر است.

شروع کنید مرور کامپوننت‌ها

چرا ساخته شد؟

  • عناصر بومی در اولویت

    <button nuiButton> یک دکمهٔ واقعی است. فرم‌ها، صفحه‌کلید و صفحه‌خوان‌ها درست کار می‌کنند، چون چیزی دور آن پیچیده نشده است.

  • یک استایل‌شیت، هر فریم‌ورکی

    کامپوننت‌ها CSS خالص در لایه‌های آبشاری (cascade layers) هستند: امروز Angular، بعد React و HTML ساده همیشه.

  • CSS شما همیشه برنده است

    همه‌چیز داخل @layer nui ارائه می‌شود؛ پس استایل‌های خودتان بدون !important و بدون درگیری با specificity آن را بازنویسی می‌کنند.

  • دسترس‌پذیر از پایه

    هنگام تولید پالت، کنتراست هر جفت رنگ با WCAG 2.2 AA سنجیده می‌شود. فوکوس، حالت رنگ‌های اجباری (forced colors) و کاهش حرکت از پیش مدیریت شده‌اند.

  • سفارشی‌سازی بیش از حد لازم

    فنرها، جلوه‌های فشردن، انیمیشن‌های ورود، شکل و شعاع گوشه‌ها و تراکم: یک اتریبیوت برای کل اپ یا یک ورودی برای هر کامپوننت، بر پایهٔ توکن‌های طراحی استاندارد W3C.

  • Angular مدرن

    ورودی‌های سیگنالی، zoneless، رندر سمت سرور و یک نقطهٔ ورود برای هر کامپوننت؛ پس اپ‌ها فقط همان چیزی را در خود دارند که ایمپورت می‌کنند.

دو ایمپورت و تمام

پکیج را اضافه کنید، استایل‌شیت را یک بار ایمپورت کنید و سپس کامپوننت‌ها را در هر کامپوننت standalone به کار ببرید.

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk
usage.ts
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() {}
}