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