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