Needless UI 支援 Angular 22。元件都是獨立指令,因此不需要匯入任何模組。

安裝

加入 Angular 套件,以及提供鍵盤操作與無障礙行為的 Angular Aria 和 CDK。樣式表會隨套件一起安裝。

install.sh
pnpm add @needless-ui/angular @angular/aria @angular/cdk

匯入樣式

src/styles.css 中匯入一次樣式表即可,其中包含 Design Token 和所有元件。

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

所有樣式都位於 @layer nui 中。如果你的應用程式有 a { color: inherit } 這類全域重設樣式,請把它們放進一個在 nui 之前宣告的層中,以免覆寫元件樣式。

使用元件

從各自的進入點匯入所需的指令,並將它們加入元件的 imports 中。

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

後續步驟

瀏覽元件查看互動範例,或閱讀主題設定指南,讓介面符合你的品牌。