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