ਸ਼ੁਰੂਆਤ ਕਰੋ

Needless UI, Angular 22 ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ। ਕੰਪੋਨੈਂਟ ਸਟੈਂਡਅਲੋਨ ਡਾਇਰੈਕਟਿਵ ਹਨ, ਇਸ ਲਈ ਕੋਈ ਮੌਡਿਊਲ ਇੰਪੋਰਟ ਨਹੀਂ ਕਰਨਾ ਪੈਂਦਾ।

ਇੰਸਟਾਲ ਕਰੋ

Angular ਪੈਕੇਜ ਨੂੰ Angular Aria ਅਤੇ CDK ਦੇ ਨਾਲ ਜੋੜੋ; ਇਹੀ ਦੋਵੇਂ ਕੀ-ਬੋਰਡ ਅਤੇ ਪਹੁੰਚਯੋਗਤਾ ਨਾਲ ਜੁੜਿਆ ਵਿਹਾਰ ਦਿੰਦੇ ਹਨ। ਸਟਾਈਲਸ਼ੀਟ ਪੈਕੇਜ ਦੇ ਨਾਲ ਹੀ ਆਉਂਦੀ ਹੈ।

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

ਅਗਲੇ ਕਦਮ

ਲਾਈਵ ਉਦਾਹਰਨਾਂ ਲਈ ਕੰਪੋਨੈਂਟ ਵੇਖੋ, ਜਾਂ ਉਨ੍ਹਾਂ ਨੂੰ ਆਪਣੇ ਬ੍ਰਾਂਡ ਮੁਤਾਬਕ ਢਾਲਣ ਲਈ ਥੀਮਿੰਗ ਗਾਈਡ ਪੜ੍ਹੋ।