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

后续步骤

浏览组件查看可交互示例,或阅读主题定制指南,让界面契合你的品牌。