Needless UI 支援 Angular 22。元件都是獨立指令,因此不需要匯入任何模組。
安裝
加入 Angular 套件,以及提供鍵盤操作與無障礙行為的 Angular Aria 和 CDK。樣式表會隨套件一起安裝。
pnpm add @needless-ui/angular @angular/aria @angular/cdk匯入樣式
在 src/styles.css 中匯入一次樣式表即可,其中包含 Design Token 和所有元件。
/* 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() {}
}