Needless UI

திறந்த மூலம் · Angular 22 · React 19 · MIT

தேவைக்கு மீறிய நேர்த்தியுடன் கட்டமைக்கப்பட்ட UI கம்போனென்ட்கள்.

நேட்டிவ் எலிமென்ட்களின் மேல் அமைந்த அணுகக்கூடிய Angular கம்போனென்ட்கள்; எந்த ஃப்ரேம்வொர்க்கையும் சாராத ஒரே ஸ்டைல்ஷீட் அவற்றுக்கு ஸ்டைல் தருகிறது. பிற லைப்ரரிகள் தனியாக விற்பவை உட்பட, எல்லாமே MIT உரிமம் கொண்டவை: வளங்களின் காலவரிசைகள் கொண்ட நிகழ்வு அட்டவணை, குழுவாக்கமும் Excel ஏற்றுமதியும் கொண்ட தரவுக் கட்டம்.

தொடங்குங்கள் கம்போனென்ட்களைப் பாருங்கள்

இது ஏன் உருவானது

  • கட்டணப் பதிப்பு இல்லை

    நிகழ்வு அட்டவணையின் வளங்களின் காலவரிசையும் மீண்டும் வரும் நிகழ்வுகளும், தரவுக் கட்டத்தின் குழுவாக்கம், மரத் தரவு, Excel ஏற்றுமதி ஆகியவையும் மற்ற எல்லாவற்றையும் போலவே MIT உரிமம் கொண்டவை: உரிமச் சாவி இல்லை, நீர்க்குறி இல்லை. கட்டண லைப்ரரியிலிருந்து மாறுகிறீர்களா? FullCalendar, AG Grid ஆகியவற்றுக்கான வழிகாட்டிகளைப் படியுங்கள்.

  • நேட்டிவ் எலிமென்ட்களுக்கே முன்னுரிமை

    <button nuiButton> ஓர் உண்மையான பொத்தான். அதைச் சுற்றி வேறு எந்த உறையும் இல்லாததால், படிவங்கள், விசைப்பலகை, ஸ்கிரீன் ரீடர்கள் எல்லாம் இயல்பாகவே வேலை செய்கின்றன.

  • ஒரே ஸ்டைல்ஷீட், எந்த ஃப்ரேம்வொர்க்குக்கும்

    கம்போனென்ட்கள் கேஸ்கேட் லேயர்களில் உள்ள சாதாரண CSS: இன்று Angular, இதுவரை நிகழ்வு அட்டவணைக்கும் தரவுக் கட்டத்துக்கும் React, எப்போதும் வெறும் HTML.

  • எப்போதும் வெல்வது உங்கள் CSS-தான்

    எல்லாமே @layer nui-க்குள் இருப்பதால், !important இல்லாமலும் ஸ்பெசிஃபிசிட்டி சண்டைகள் இல்லாமலும் உங்கள் ஸ்டைல்கள் அதை ஓவர்ரைடு செய்கின்றன.

  • வடிவமைப்பிலேயே அணுகல்தன்மை

    வண்ணத் தட்டு உருவாக்கப்படும்போதே ஒவ்வொரு வண்ண ஜோடியும் WCAG 2.2 AA அளவுகோலின்படி சரிபார்க்கப்படுகிறது. ஃபோகஸ், forced colors, அசைவுக் குறைப்பு ஆகியவை உங்களுக்காக ஏற்கெனவே கையாளப்படுகின்றன.

  • தேவைக்கு மிஞ்சிய தனிப்பயனாக்கம்

    ஸ்பிரிங்குகள், அழுத்த விளைவுகள், நுழைவு அனிமேஷன்கள், மூலை வடிவங்கள், ஆரம், அடர்த்தி: முழுச் செயலிக்கும் ஒரே ஆட்ரிபியூட், அல்லது ஒவ்வொரு கம்போனென்ட்டுக்கும் ஓர் இன்புட்; எல்லாம் தரநிலை 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() {}
}