反应 UI 组件
艾伯塔省政府设计系统网络组件的回放包装.
支持的React版本:17,18和19.
安装
npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common
注册网络组件
导入应用程序入口处的网络组件, 如
src/main.tsx数字 :
import "@abgov/web-components";
添加样式
导入您主样式表中的组件样式, 如 src/index.css。本样式表包括设计符号和暗主题覆盖:
@import "@abgov/web-components/index.css";
添加图标
将虹膜添加到 <head> 联 合 国 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>
使用组件
import { GoabButton } from "@abgov/react-components";
export function App() {
return <GoabButton type="primary">Continue</GoabButton>;
}
见 开发者设置指南 财务报告和审定财务报表 艾伯塔省政府设计系统 更多信息.