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 அளவுகோலின்படி சரிபார்க்கப்படுகிறது. ஃபோகஸ், 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() {}
}