简介
@ng-arthur/pc 是一个基于 Angular 框架的 PC 端组件库,主要提供了常用的 UI 组件,包括按钮、表格、弹出框等。使用该组件库可以快速搭建出符合规范美观的 PC 端页面。
安装
安装该组件库非常简单,只需要使用 npm 命令即可:
npm install @ng-arthur/pc
使用
在你的 Angular 项目中使用该组件库也非常简单,只需要在需要使用组件的 module 中 import 并将其添加到 declarations 和 exports 中即可。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ---------------- ----------- ------------- ------ -------- - ---------------- -- -------- - ---------------- - -- ------ ----- --------- - -
现在就可以在你的项目中使用 NgArthurPcModule 中包含的所有组件啦。
Button 按钮
Button 组件是 @ng-arthur/pc 中最常用的 UI 组件之一。
基本使用
使用 button 组件非常简单,只需要在 template 中引入 ButtonComponent:
<button ng-arthur-pc-button>按钮</button>
带颜色
Button 组件提供了多种颜色供选择,在使用时只需要加上 color 属性即可:
<button ng-arthur-pc-button color="primary">主要按钮</button> <button ng-arthur-pc-button color="warning">警告按钮</button> <button ng-arthur-pc-button color="success">成功按钮</button> <button ng-arthur-pc-button color="danger">危险按钮</button>
带图标
在 button 组件中,还可以添加图标,只需要在 button 内添加 ng-content,并在 button 之前加上一个 ng-arthur-pc-icon 组件即可:
<button ng-arthur-pc-button> <ng-arthur-pc-icon></ng-arthur-pc-icon>带图标按钮 </button>
Table 表格
Table 组件是 @ng-arthur/pc 中另一个常用的 UI 组件,用于展示表格数据。
基本使用
使用 Table 组件,需要在 template 中添加 table 组件,并传入表格数据即可:
<ng-arthur-pc-table [data]="tableData"></ng-arthur-pc-table>
其中,tableData 是一个数组,具体数据结构如下:
-- -------------------- ---- ------- --------- -------- - --- ------- ----- ------- ---- ------- ------- ------- - -- ---- ------- -----------
添加表头
在 Table 组件中可以添加表头,在 ng-container 中添加 th 组件即可:
<ng-arthur-pc-table [data]="tableData"> <ng-container ng-arthur-pc-table-header> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </ng-container> </ng-arthur-pc-table>
自定义列
在 Table 组件中,还支持自定义列展示内容,在 ng-container 中添加 ng-arthur-pc-table-column 即可:
<ng-arthur-pc-table [data]="tableData"> <ng-container ng-arthur-pc-table-column let-row="row"> <span *ngIf="row.gender === '女'">女生</span> <span *ngIf="row.gender === '男'">男生</span> </ng-container> </ng-arthur-pc-table>
MessageBox 弹出框
MessageBox 弹出框组件可以快速实现弹出框功能,类似于原生的 alert。
基本使用
使用 MessageBox 弹出框非常简单,只需要调用其 showMessage 方法即可弹出框:
-- -------------------- ---- ------- ------ - --------------------------- - ---- ---------------- ------ ----- ------------ - ------------------- ------------------ ---------------------------- -- ---------------- - ---------------------------------------- ----------- - -
带确认回调
在 MessageBox 中还可以添加确认回调,只需要传入 confirm 参数即可:
this.messageBoxService.showMessage('提示', '确认关闭页面?', { confirm: true }).subscribe(res => { if (res) { window.close(); } });
总结
通过该使用教程,我们已经了解了如何使用 @ng-arthur/pc 组件库中的 Button、Table 和 MessageBox 等常用组件,希望可以对你的项目开发提供帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583bc8