ਸ਼ੁਰੂਆਤ ਕਰੋ

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

ਇੰਸਟਾਲ ਕਰੋ

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 ਦਾ ਰੀਸੈੱਟ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕਰ ਸਕਦਾ, ਅਤੇ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਫਿਰ ਵੀ ਕੰਪੋਨੈਂਟਾਂ ’ਤੇ ਭਾਰੂ ਰਹਿੰਦੀਆਂ ਹਨ। 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() {}
}

ਅਗਲੇ ਕਦਮ

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