தொடங்குதல்

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

அடுத்த படிகள்

நேரடி எடுத்துக்காட்டுகளுக்கு கம்போனென்ட்களைப் பாருங்கள், அல்லது உங்கள் பிராண்டுக்கு ஏற்றபடி மாற்ற தீமிங் வழிகாட்டியைப் படியுங்கள்.