Cara miwiti

Needless UI bisa dienggo karo Angular 22. Komponen-komponene yaiku directive standalone, dadi ora ana modul sing kudu di-import.

Instalasi

Lakokna ng add. Printah iki nambahake paket Angular bebarengan karo Angular Aria lan CDK, sing nyedhiyakake prilaku keyboard lan aksesibilitas. Stylesheet-e uga diimpor menyang gaya global panjenengan.

ng add @needless-ui/angular

Yen panjenengan luwih seneng nyiapake kanthi manual, tambahna paket-pakete, banjur impor gaya kaya sing katon ing ngisor iki.

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

Impor gaya

Stylesheet cukup diimpor sepisan ing sisih paling ndhuwur src/styles.css; ng add uga nyelehake ing kono. Yen gaya global panjenengan nganggo Sass, tulis @use '@needless-ui/css'; minangka gantine. Stylesheet iki isine design token lan kabeh komponen.

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

Kabeh ana ing njero @layer nui. Yen aplikasi panjenengan kagungan reset global kayata a { color: inherit }, lebokna ing layer sing diumumake sadurunge nui supaya ora nimpa komponen.

Yen panjenengan ngagem Tailwind CSS, nui kudu diumumake sawise layer base duweke Tailwind lan sadurunge utilitase: kanthi mangkono reset Tailwind ora bisa mbusak gaya komponen, lan class utilitas tetep ngalahake komponen. ng add nindakake iki kanthi otomatis yen nemokake Tailwind.

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

Agem komponen

Impor directive sing panjenengan betahake saka entry point-e, banjur tambahna menyang imports ing komponen panjenengan.

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

Langkah sabanjure

Pirsani komponen kanggo conto langsung, utawa waos pandhuan tema supaya cocog karo merek panjenengan.