埃加米大学
@eagami/ui 是一个轻量级,可访问的角构件库和设计系统. 智能默认出自"盒子",具有完全自定义的设计来适应任何品牌.
文档 • 妇女 构成部分 • 妇女 图标
设计符号 • 妇女 主题构建器 • 妇女 国际化 • 妇女 无障碍
为什么是Eagami UI
你品牌的主题. 给它每个角色一个颜色,它产生一个完整的,对比度检查的调色板.
轻取. 没有运行时间依赖性, 没有 CSS 框架, 和独立的无副作用组件, 所以您的应用程序只捆绑它导入的东西 .
无障碍和本地化. 每个组件都与WCAG 2.2 AA相会,并配有完整的键盘支持和自有的轴心测试套件. 使用15种语言的内建文本船,您可在运行时切换.
你的拥有. Plain Angular 和 CSS 没有锁定: 读取,复制, 或叉出任何组件, 如您的应用程序的其余部分.
现代角. 信号和原生控制流贯穿全过程,具有SSR安全渲染,先发后发和水分.
安装
ng add @eagami/ui
示意图安装软件包并注册全局样式表、字体和 provideStaleBuildReload()用手把它绑起来,看 设置。 。 。 .
使用
import { ButtonComponent } from '@eagami/ui';
@Component({
imports: [ButtonComponent],
template: `<ea-button (clicked)="save()">Save</ea-button>`,
})
export class MyComponent {
save() {}
}
主题
每个角色传递一色 provideEagamiUi数字 :
bootstrapApplication(AppComponent, {
providers: [
provideEagamiUi({
palette: {
primary: { base: '#2563eb' },
secondary: { base: '#f97316' },
},
}),
],
});
焦点环跟随主色相. 当品牌读取错误或警告时, 给焦点一个自己的颜色 focus: { base: '#2563eb' } 中标 palette。 。 。 .
其他的都是 CSS 定制属性,您可以覆盖 。 见 设计符号。 。 。 .
表单
showErrorsOn 当窗体组件显示验证错误时设置 :
'change'(默认值):一旦用户更改了字段并离开,或者提交表单. 用户标签过去的字段保持安静,一个新的错误等待焦点离开字段.'blur':用户一离开球场,甚至保持不变,而一个新的出错仍然会等焦点离开球场.'touch':用户一旦离开球场,甚至没有改变,并在之后编辑时活起.
设置为应用宽度 forms,或与 showErrorsOn 输入每个窗体组件的:
provideEagamiUi({ forms: { showErrorsOn: 'touch' } });
部署
在部署上留下的标签仍然运行着旧的建筑,所以它懒惰的负载下一页会要求删除的部署文件. provideStaleBuildReload() 从 @eagami/ui/router 装入新构造上的全部页面, 只试一次:
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes), provideStaleBuildReload()],
});
过 version 财务报告和审定财务报表 onReport 以记录每次重新装入的结果,并检查 isStaleBuildReloadError(error) 以保留它从错误报告中解答的错误.
测试
<ea-dialog> 财务报告和审定财务报表 <ea-drawer> 以当地人为基础 <dialog> 元素,以及 @eagami/ui/testing 让他们在jsdom工作, 缺乏 showModal() 财务报告和审定财务报表 close()调用 installNativeDialogShim() 测试设置文件的一次 :
import { installNativeDialogShim } from '@eagami/ui/testing';
installNativeDialogShim();