Needless UI

ओपन सोर्स · Angular 22 · MIT

UI कंपोनंट्स, गरजेपेक्षा कितीतरी जास्त बारकाईने इंजिनिअर केलेले.

Needless UI फ्रेमवर्कमुक्त एका स्टाइलशीटने आणि W3C डिझाइन टोकनने नेटिव्ह एलिमेंट्सना स्टाइल देते. त्याचे Angular डायरेक्टिव्ह Angular Aria मधून वर्तन जोडतात, त्यामुळे प्रत्येक कंपोनंट पहिल्या रेंडरपासूनच ॲक्सेसिबल असतो.

सुरुवात करा कंपोनंट्स पाहा

हे का बनवले

  • आधी नेटिव्ह एलिमेंट्स

    <button nuiButton> हे खरेखुरे बटण आहे. त्याभोवती काहीही गुंडाळलेले नसल्यामुळे फॉर्म, कीबोर्ड आणि स्क्रीन रीडर व्यवस्थित काम करतात.

  • एक स्टाइलशीट, कोणताही फ्रेमवर्क

    कंपोनंट्स म्हणजे कॅस्केड लेयर्समधील साधी CSS: आज Angular, पुढे React, आणि साधे HTML नेहमीच.

  • आपली CSS नेहमीच वरचढ

    सर्व काही @layer nui मध्ये असते, त्यामुळे !important किंवा स्पेसिफिसिटीची रस्सीखेच न करता आपल्या स्टाइल्स ते ओव्हरराइड करतात.

  • रचनेतूनच ॲक्सेसिबल

    पॅलेट तयार करताना प्रत्येक रंगजोडी WCAG 2.2 AA नुसार तपासली जाते. फोकस, फोर्स्ड कलर्स आणि रिड्यूस्ड मोशनची काळजी आपोआप घेतली जाते.

  • विनाकारण इतके कस्टमायझेबल

    स्प्रिंग्स, दाबण्याचे इफेक्ट्स, एंट्री ॲनिमेशन, कोपऱ्यांच्या आकृत्या, रेडियस आणि डेन्सिटी: संपूर्ण ॲपसाठी एक ॲट्रिब्यूट, किंवा प्रत्येक कंपोनंटसाठी एक इनपुट, प्रमाणित W3C डिझाइन टोकनवर आधारित.

  • आधुनिक Angular

    सिग्नल इनपुट्स, झोनलेस, सर्व्हर रेंडरिंग आणि प्रत्येक कंपोनंटसाठी स्वतंत्र एंट्री पॉइंट, त्यामुळे ॲपमध्ये फक्त इम्पोर्ट केलेलाच कोड जातो.

दोन इम्पोर्ट, आणि काम झाले

पॅकेज जोडा, स्टाइलशीट एकदा इम्पोर्ट करा आणि मग कोणत्याही स्टँडअलोन कंपोनंटमध्ये कंपोनंट्स वापरा.

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