# @eagami/ui 中文文档
规范地址：https://npmcn.com/package/%40eagami/ui/
版本：5\.82\.1
npm 元数据更新时间：2026-11-13T10:24:16.027Z
中文译文更新时间：2026-11-13T03:24:20.282Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40eagami/ui
原文对照：https://npmcn.com/package/%40eagami/ui/?lang=original
项目主页：https://eagami.com/ui
源码仓库：https://github.com/mwiraszka/eagami
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：6.2 MB，36 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=20
- 运行依赖：0 个
- peer 依赖：@angular/core ^21\.0\.0 \|\| ^22\.0\.0，@angular/forms ^21\.0\.0 \|\| ^22\.0\.0，@angular/common ^21\.0\.0 \|\| ^22\.0\.0，@angular/router ^21\.0\.0 \|\| ^22\.0\.0
- 首次发布：2026-03-09T03:37:37.996Z
- 最新版本发布：2026-11-13T10:24:15.658Z
- 近 30 天下载量：3667（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：191（近 12 个月 191 个）
## 中文简介
轻量级,可访问,可主题的 Angular UI 组件库和基于 CSS 自定义属性的图标集
## 安装
```sh
npm install @eagami/ui
```
也可以使用：`pnpm add @eagami/ui`、`yarn add @eagami/ui`、`bun add @eagami/ui`
## README
# 埃加米大学
[](https://www.npmjs.com/package/@eagami/ui) [](https://github.com/mwiraszka/eagami/blob/main/LICENSE) [](https://main--6a14a63d5cab2ebad17871ff.chromatic.com/) [](https://eagami.com/ui/accessibility)
`@eagami/ui` 是一个轻量级,可访问的角构件库和设计系统. 智能默认出自"盒子",具有完全自定义的设计来适应任何品牌.
[文档](https://eagami.com/ui) • 妇女 [构成部分](https://eagami.com/ui/components) • 妇女 [图标](https://eagami.com/ui/icons)
[设计符号](https://eagami.com/ui/design-tokens) • 妇女 [主题构建器](https://eagami.com/ui/theme-builder) • 妇女 [国际化](https://eagami.com/ui/i18n) • 妇女 [无障碍](https://eagami.com/ui/accessibility)
## 为什么是Eagami UI
**你品牌的主题.** 给它每个角色一个颜色,它产生一个完整的,对比度检查的调色板.
**轻取.** 没有运行时间依赖性, 没有 CSS 框架, 和独立的无副作用组件, 所以您的应用程序只捆绑它导入的东西 .
**无障碍和本地化.** 每个组件都与WCAG 2.2 AA相会,并配有完整的键盘支持和自有的轴心测试套件. 使用15种语言的内建文本船,您可在运行时切换.
**你的拥有.** Plain Angular 和 CSS 没有锁定: 读取,复制, 或叉出任何组件, 如您的应用程序的其余部分.
**现代角.** 信号和原生控制流贯穿全过程,具有SSR安全渲染,先发后发和水分.
## 安装
```bash
ng add @eagami/ui
```
示意图安装软件包并注册全局样式表、字体和 `provideStaleBuildReload()`用手把它绑起来,看 [设置](https://eagami.com/ui/setup)。 。 。 .
## 使用
```ts
import { ButtonComponent } from '@eagami/ui';
@Component({
imports: [ButtonComponent],
template: `Save`,
})
export class MyComponent {
save() {}
}
```
## 主题
每个角色传递一色 `provideEagamiUi`数字 :
```ts
bootstrapApplication(AppComponent, {
providers: [
provideEagamiUi({
palette: {
primary: { base: '#2563eb' },
secondary: { base: '#f97316' },
},
}),
],
});
```
焦点环跟随主色相. 当品牌读取错误或警告时, 给焦点一个自己的颜色 `focus: { base: '#2563eb' }` 中标 `palette`。 。 。 .
其他的都是 CSS 定制属性,您可以覆盖 。 见 [设计符号](https://eagami.com/ui/design-tokens)。 。 。 .
## 表单
`showErrorsOn` 当窗体组件显示验证错误时设置 :
- `'change'` (默认值):一旦用户更改了字段并离开,或者提交表单. 用户标签过去的字段保持安静,一个新的错误等待焦点离开字段.
- `'blur'`:用户一离开球场,甚至保持不变,而一个新的出错仍然会等焦点离开球场.
- `'touch'`:用户一旦离开球场,甚至没有改变,并在之后编辑时活起.
设置为应用宽度 `forms`,或与 `showErrorsOn` 输入每个窗体组件的:
```ts
provideEagamiUi({ forms: { showErrorsOn: 'touch' } });
```
## 部署
在部署上留下的标签仍然运行着旧的建筑,所以它懒惰的负载下一页会要求删除的部署文件. `provideStaleBuildReload()` 从 `@eagami/ui/router` 装入新构造上的全部页面, 只试一次:
```ts
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes), provideStaleBuildReload()],
});
```
过 `version` 财务报告和审定财务报表 `onReport` 以记录每次重新装入的结果,并检查 `isStaleBuildReloadError(error)` 以保留它从错误报告中解答的错误.
## 测试
`` 财务报告和审定财务报表 `` 以当地人为基础 `