Needless UI

Angular 22 · اوپن سورس · MIT

UI کمپوننٹس، جن پر ضرورت سے زیادہ محنت کی گئی ہے۔

Needless UI فریم ورک سے آزاد ایک اسٹائل شیٹ اور W3C ڈیزائن ٹوکنز کے ذریعے نیٹو ایلیمنٹس کو اسٹائل کرتی ہے۔ اس کے Angular ڈائریکٹوز Angular Aria سے برتاؤ شامل کرتے ہیں، اس لیے ہر کمپوننٹ پہلے رینڈر سے ہی قابلِ رسائی ہوتا ہے۔

شروع کریں کمپوننٹس دیکھیں

یہ کیوں بنائی گئی؟

  • پہلے نیٹو ایلیمنٹس

    <button nuiButton> ایک اصلی بٹن ہے۔ فارمز، کی بورڈ اور اسکرین ریڈرز اس لیے ٹھیک کام کرتے ہیں کہ اس کے گرد کچھ بھی لپیٹا نہیں گیا۔

  • ایک اسٹائل شیٹ، ہر فریم ورک کے لیے

    کمپوننٹس cascade layers کے اندر سادہ CSS ہیں: آج Angular، آگے React، اور سادہ HTML ہمیشہ۔

  • آپ کا CSS ہمیشہ غالب رہتا ہے

    سب کچھ @layer nui کے اندر آتا ہے، اس لیے آپ کے اپنے اسٹائلز !important یا specificity کی کھینچا تانی کے بغیر اسے اوور رائیڈ کر دیتے ہیں۔

  • بنیاد ہی سے قابلِ رسائی

    پیلیٹ بناتے وقت رنگوں کے ہر جوڑے کو WCAG 2.2 AA کے معیار پر پرکھا جاتا ہے۔ فوکس، forced colors اور کم حرکت (reduced motion) کا خیال پہلے ہی رکھا گیا ہے۔

  • ضرورت سے زیادہ کسٹمائزیشن

    اسپرنگز، دبانے کے اثرات، آمد کی اینیمیشنز، کونوں کی شکلیں، ریڈیس اور ڈینسٹی: پوری ایپ کے لیے ایک ایٹریبیوٹ، یا ہر کمپوننٹ کے لیے ایک ان پٹ، اور سب کچھ معیاری 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() {}
}