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