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