角 UI 组件

艾伯塔省政府设计系统网络组件的角包装器.

支持的Angular版本:18,19,20和21.

安装

npm i @abgov/angular-components @abgov/web-components @abgov/ui-components-common

注册网络组件

在应用程序的入口处, 之前导入一个基本的网络组件 拖曳应用程序 :

// src/main.ts
import "@abgov/web-components";

保持现有的 bootstrapApplication 在此导入后拨打.

导入包装组件

角包装是独立的组件. 将每个包装直接导入到 使用它的独立组件:

// src/app/app.ts
import { Component } from "@angular/core";
import { GoabButton } from "@abgov/angular-components";

@Component({
  selector: "app-root",
  standalone: true,
  imports: [GoabButton],
  template: `<goab-button type="primary">Continue</goab-button>`,
})
export class App {}

standalone: true 明确显示与Angular 18的相容性;这是默认值 在较新的Angular版本中.

对于基于 NgModule 的现有应用程序,请添加每个独立的包装组件 模块的 imports 阵列. AngularComponentsModule 只有应用程序需要 仍然使用遗产 goaValue, (中文(简体) ), goaValueList,或 goaChecked 构成指令.

添加样式

导入组件样式 src/styles.css。本样式表包括设计符号和暗主题覆盖:

@import "@abgov/web-components/index.css";

添加图标

将虹膜添加到 <head> 联 合 国 src/index.html数字 :

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ionicons/ionicons.esm.js"
  integrity="sha384-QeK0N4dchhCMcoF1OkHAcgwR00gJv1uQr15TCJ5CXEcLF0wm8HC4QbtQzJMCTO+c"
  crossorigin="anonymous"
></script>

见 开发者设置指南 财务报告和审定财务报表 艾伯塔省政府设计系统 更多信息.