Needless UI, Angular 22 ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್‌ಗಳು standalone ಡೈರೆಕ್ಟಿವ್‌ಗಳಾಗಿರುವುದರಿಂದ, ಇಂಪೋರ್ಟ್ ಮಾಡಬೇಕಾದ ಮಾಡ್ಯೂಲ್‌ಗಳು ಯಾವುವೂ ಇಲ್ಲ.
ಇನ್‌ಸ್ಟಾಲೇಶನ್
ng add ಅನ್ನು ರನ್ ಮಾಡಿ. ಇದು ಕೀಬೋರ್ಡ್ ಮತ್ತು ಆಕ್ಸೆಸಿಬಿಲಿಟಿ ನಡವಳಿಕೆಯನ್ನು ಒದಗಿಸುವ Angular Aria ಮತ್ತು CDK ಜೊತೆಗೆ Angular ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಸೇರಿಸಿ, ನಿಮ್ಮ ಗ್ಲೋಬಲ್ ಸ್ಟೈಲ್‌ಗಳಲ್ಲಿ ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡುತ್ತದೆ.
ng add @needless-ui/angularಬದಲಿಗೆ ಎಲ್ಲವನ್ನೂ ನೀವೇ ಹೊಂದಿಸಲು ಬಯಸಿದರೆ, ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಸೇರಿಸಿ, ನಂತರ ಕೆಳಗೆ ತೋರಿಸಿರುವಂತೆ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ.
pnpm add @needless-ui/angular @angular/aria @angular/cdkಸ್ಟೈಲ್‌ಗಳನ್ನು ಇಂಪೋರ್ಟ್ ಮಾಡಿ
ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು src/styles.css ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಒಮ್ಮೆ ಮಾತ್ರ ಇಂಪೋರ್ಟ್ ಮಾಡಲಾಗುತ್ತದೆ; ng add ಕೂಡ ಅದನ್ನು ಅಲ್ಲಿಯೇ ಇರಿಸುತ್ತದೆ. ನಿಮ್ಮ ಗ್ಲೋಬಲ್ ಸ್ಟೈಲ್‌ಗಳು Sass ನಲ್ಲಿದ್ದರೆ, ಬದಲಿಗೆ @use '@needless-ui/css'; ಎಂದು ಬರೆಯಿರಿ. ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ಡಿಸೈನ್ ಟೋಕನ್‌ಗಳು ಮತ್ತು ಎಲ್ಲಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸೇರಿವೆ.
/* src/styles.css */
@layer reset, nui, app;
@import '@needless-ui/css';ಎಲ್ಲವೂ @layer nui ಒಳಗೆ ಇರುತ್ತದೆ. ನಿಮ್ಮ ಆ್ಯಪ್‌ನಲ್ಲಿ a { color: inherit } ನಂತಹ ಗ್ಲೋಬಲ್ ರೀಸೆಟ್‌ಗಳಿದ್ದರೆ, ಅವು ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡದಂತೆ ಅವುಗಳನ್ನು nui ಗಿಂತ ಮೊದಲು ಘೋಷಿಸಲಾದ ಲೇಯರ್‌ನಲ್ಲಿ ಇರಿಸಿ.
Tailwind CSS ಬಳಸುವಾಗ, nui ಅನ್ನು Tailwind ನ base ಲೇಯರ್‌ನ ನಂತರ ಮತ್ತು ಅದರ ಯುಟಿಲಿಟಿಗಳಿಗಿಂತ ಮೊದಲು ಘೋಷಿಸಿ: ಆಗ ಅದರ ರೀಸೆಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಸ್ಟೈಲ್‌ಗಳನ್ನು ಅಳಿಸಿಹಾಕಲಾರದು, ಮತ್ತು ಯುಟಿಲಿಟಿ ಕ್ಲಾಸ್‌ಗಳು ಎಂದಿನಂತೆ ಅವುಗಳಿಗಿಂತ ಆದ್ಯತೆ ಪಡೆಯುತ್ತವೆ. Tailwind ಪತ್ತೆಯಾದಾಗ ng add ಇದನ್ನು ತಾನಾಗಿಯೇ ಮಾಡುತ್ತದೆ.
/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ
ನಿಮಗೆ ಬೇಕಾದ ಡೈರೆಕ್ಟಿವ್‌ಗಳನ್ನು ಅವುಗಳ ಎಂಟ್ರಿ ಪಾಯಿಂಟ್‌ಗಳಿಂದ ಇಂಪೋರ್ಟ್ ಮಾಡಿ, ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ನ 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() {}
}ಮುಂದಿನ ಹಂತಗಳು
ಲೈವ್ ಉದಾಹರಣೆಗಳಿಗಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೋಡಿ, ಅಥವಾ ನಿಮ್ಮ ಬ್ರ್ಯಾಂಡ್‌ಗೆ ತಕ್ಕಂತೆ ಹೊಂದಿಸಲು ಥೀಮಿಂಗ್ ಮಾರ್ಗದರ್ಶಿಯನ್ನು ಓದಿ.