ಪ್ರಾರಂಭಿಸುವುದು

Needless UI, Angular 22 ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್‌ಗಳು standalone ಡೈರೆಕ್ಟಿವ್‌ಗಳಾಗಿರುವುದರಿಂದ, ಇಂಪೋರ್ಟ್ ಮಾಡಬೇಕಾದ ಮಾಡ್ಯೂಲ್‌ಗಳು ಯಾವುವೂ ಇಲ್ಲ.

ಇನ್‌ಸ್ಟಾಲೇಶನ್

ಕೀಬೋರ್ಡ್ ಮತ್ತು ಆಕ್ಸೆಸಿಬಿಲಿಟಿ ನಡವಳಿಕೆಯನ್ನು ಒದಗಿಸುವ Angular Aria ಮತ್ತು CDK ಜೊತೆಗೆ Angular ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಸೇರಿಸಿ. ಸ್ಟೈಲ್‌ಶೀಟ್ ಅದರೊಂದಿಗೇ ಬರುತ್ತದೆ.

pnpm add @needless-ui/angular @angular/aria @angular/cdk

ಸ್ಟೈಲ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ

src/styles.css ನಲ್ಲಿ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಒಮ್ಮೆ ಇಂಪೋರ್ಟ್ ಮಾಡಿ. ಅದರಲ್ಲಿ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳು ಮತ್ತು ಎಲ್ಲಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸೇರಿವೆ.

/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';

ಎಲ್ಲವೂ @layer nui ಒಳಗೆ ಇರುತ್ತದೆ. ನಿಮ್ಮ ಆ್ಯಪ್‌ನಲ್ಲಿ a { color: inherit } ನಂತಹ ಗ್ಲೋಬಲ್ ರೀಸೆಟ್‌ಗಳಿದ್ದರೆ, ಅವು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡದಂತೆ ಅವುಗಳನ್ನು nui ಗಿಂತ ಮೊದಲು ಘೋಷಿಸಲಾದ ಲೇಯರ್‌ನಲ್ಲಿ ಇರಿಸಿ.

ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ

ನಿಮಗೆ ಬೇಕಾದ ಡೈರೆಕ್ಟಿವ್‌ಗಳನ್ನು ಅವುಗಳ ಎಂಟ್ರಿ ಪಾಯಿಂಟ್‌ಗಳಿಂದ ಇಂಪೋರ್ಟ್ ಮಾಡಿ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನ imports ಗೆ ಸೇರಿಸಿ.

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

ಮುಂದಿನ ಹಂತಗಳು

ಲೈವ್ ಉದಾಹರಣೆಗಳಿಗಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೋಡಿ, ಅಥವಾ ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್‌ಗೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸಲು ಥೀಮಿಂಗ್ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಓದಿ.