简介
@springbuck/ng-foundation 是一个基于 Angular 框架开发的 UI 库，提供了常用的 UI 组件和工具，方便前端工程师快速搭建界面。
安装
在终端界面输入以下命令安装：
npm install @springbuck/ng-foundation
使用
导入
在你的项目中的 app.module.ts 模块中导入所需要的组件，例如以下代码:
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - ------------ ------------------- - ---- ----------------- ------ - ------------- - ---- ---------------------------- -- ------- ------ - ------------- ------------ - ---- ---------------------------- ----------- -------- --------------- ------------ -------------------- ------------- ------------- -------------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
使用组件
在你需要使用某一组件的 HTML 文件中，引入该组件的 tag，例如：
<!-- 使用 Button 组件 --> <fnd-button>Hello Button</fnd-button> <!-- 使用 Dialog 组件 --> <fnd-dialog [visible]="showDialog" (close)="handleCloseDialog()">Hello Dialog</fnd-dialog>
组件列表
@springbuck/ng-foundation 提供了以下 UI 组件，可以根据实际需求选择使用：
- Button 按钮
- Dialog 对话框
接下来分别介绍这两个组件的详细使用方法。
Button 按钮
属性
Button 组件提供了以下属性：
| 属性名 | 类型 | 说明 |
|---|---|---|
| type | string | 可选值有 primary、secondary、success、warning、danger、link，表示按钮的类型 |
| disabled | boolean | 是否禁用按钮 |
事件
Button 组件提供了以下事件：
| 事件名 | 说明 |
|---|---|
| click | 按钮被点击时触发 |
示例代码
<fnd-button type="primary" (click)="handleClick()">Click Me</fnd-button>
Dialog 对话框
属性
Dialog 组件提供了以下属性：
| 属性名 | 类型 | 说明 |
|---|---|---|
| visible | boolean | 是否显示对话框 |
事件
Dialog 组件提供了以下事件：
| 事件名 | 说明 |
|---|---|
| close | 关闭对话框时触发 |
示例代码
<fnd-dialog [visible]="showDialog" (close)="handleCloseDialog()">I'm a dialog</fnd-dialog>
总结
以上是 @springbuck/ng-foundation 的使用教程。这个 UI 库包含了常用的 UI 组件和工具，方便前端工程师快速搭建界面。通过学习本文，你可以更加深入了解该库的使用方法，并且可以根据实际需求灵活选择使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cfb81e8991b448e6c51