Needless UI

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

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

نیٹو ایلیمنٹس پر بنے قابلِ رسائی Angular کمپوننٹس، جنہیں فریم ورک سے آزاد ایک ہی اسٹائل شیٹ اسٹائل کرتی ہے۔ سب کچھ MIT لائسنس کے تحت ہے، وہ بھی جو دوسری لائبریریاں الگ سے بیچتی ہیں: ریسورس ٹائم لائنز والا شیڈولر، اور گروپنگ اور Excel ایکسپورٹ والا ڈیٹا گرڈ۔

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

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

  • کوئی پریمیم ورژن نہیں

    شیڈولر کی ریسورس ٹائم لائن اور بار بار ہونے والے ایونٹس، اور ڈیٹا گرڈ کی گروپنگ، ٹری ڈیٹا اور Excel ایکسپورٹ بھی باقی سب کی طرح MIT لائسنس کے تحت ہیں: نہ لائسنس کلید، نہ واٹر مارک۔ کسی ایسی لائبریری سے منتقل ہو رہے ہیں جس کے پیسے لگتے ہیں؟ FullCalendar اور AG Grid سے منتقلی کی گائیڈز پڑھیں۔

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

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

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

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

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

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

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

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

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

    اسپرنگز، دبانے کے اثرات، آمد کی اینیمیشنز، کونوں کی شکلیں، ریڈیس اور ڈینسٹی: پوری ایپ کے لیے ایک ایٹریبیوٹ، یا ہر کمپوننٹ کے لیے ایک ان پٹ، اور سب کچھ معیاری W3C ڈیزائن ٹوکنز پر مبنی۔

  • جدید Angular

    سگنل ان پٹس، zoneless، سرور سائیڈ رینڈرنگ اور ہر کمپوننٹ کا الگ انٹری پوائنٹ، تاکہ ایپس میں صرف وہی شامل ہو جو وہ امپورٹ کرتی ہیں۔

ایک کمانڈ، پھر ایک امپورٹ

پیکیج انسٹال کرنے اور اس کی اسٹائل شیٹ امپورٹ کرنے کے لیے ng add چلائیں، پھر کسی بھی standalone کمپوننٹ میں کمپوننٹس استعمال کریں۔

ng-add.sh
ng add @needless-ui/angular
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() {}
}