Farawa

Needless UI yana aiki da Angular 22. Components directives ne na standalone, don haka babu modules da za a shigo da su.

Shigarwa

Ku gudanar da umarnin ng add. Yana ƙara package na Angular tare da Angular Aria da CDK, waɗanda ke samar da aikin allon madannai da sauƙin amfani ga kowa, kuma yana shigo da stylesheet a cikin salon gaba ɗaya na manhajarku.

ng add @needless-ui/angular

Idan kuna son saita komai da hannu a maimakon haka, ku ƙara packages, sannan ku shigo da salo kamar yadda aka nuna a ƙasa.

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

Shigo da salo

Ana shigo da stylesheet sau ɗaya a saman src/styles.css, inda ng add ke saka shi. Idan kuna amfani da Sass, ku rubuta @use '@needless-ui/css'; a maimakon haka. Stylesheet ɗin ya ƙunshi design tokens da kowane component.

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

Komai yana cikin @layer nui. Idan manhajarku tana da resets na gaba ɗaya kamar a { color: inherit }, ku sa su a cikin layer da aka ayyana kafin nui don kada su rinjayi components.

Idan kuna amfani da Tailwind CSS, ku ayyana nui bayan layer ɗin base na Tailwind kuma kafin utilities ɗinsa: ta haka reset ɗinsa ba zai iya goge salon components ba, kuma utility classes za su ci gaba da rinjayar su. ng add yana yin haka da kansa idan ya gano Tailwind.

/* src/styles.css */
@layer theme, base, nui, components, utilities;
@import '@needless-ui/css';
@import 'tailwindcss';

Amfani da component

Ku shigo da directives da kuke buƙata daga entry points ɗinsu, kuma ku ƙara su a cikin imports na component ɗinku.

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

Matakai na gaba

Ku duba components don ganin misalai masu aiki, ko ku karanta jagorar jigogi don daidaita su da tambarinku.