简介
@ng-arthur/pc 是一个基于 Angular 框架的 PC 端组件库,主要提供了常用的 UI 组件,包括按钮、表格、弹出框等。使用该组件库可以快速搭建出符合规范美观的 PC 端页面。
安装
安装该组件库非常简单,只需要使用 npm 命令即可:
--- ------- -------------
使用
在你的 Angular 项目中使用该组件库也非常简单,只需要在需要使用组件的 module 中 import 并将其添加到 declarations 和 exports 中即可。
------ - -------- - ---- ---------------- ------ - ---------------- - ---- ---------------- ----------- ------------- ------ -------- - ---------------- -- -------- - ---------------- - -- ------ ----- --------- - -
现在就可以在你的项目中使用 NgArthurPcModule 中包含的所有组件啦。
Button 按钮
Button 组件是 @ng-arthur/pc 中最常用的 UI 组件之一。
基本使用
使用 button 组件非常简单,只需要在 template 中引入 ButtonComponent:
------- -------------------------------
带颜色
Button 组件提供了多种颜色供选择,在使用时只需要加上 color 属性即可:
------- ------------------- ----------------------------- ------- ------------------- ----------------------------- ------- ------------------- ----------------------------- ------- ------------------- ----------------------------
带图标
在 button 组件中,还可以添加图标,只需要在 button 内添加 ng-content,并在 button 之前加上一个 ng-arthur-pc-icon 组件即可:
------- -------------------- -------------------------------------------- ---------
Table 表格
Table 组件是 @ng-arthur/pc 中另一个常用的 UI 组件,用于展示表格数据。
基本使用
使用 Table 组件,需要在 template 中添加 table 组件,并传入表格数据即可:
------------------- ----------------------------------------
其中,tableData 是一个数组,具体数据结构如下:
--------- -------- - --- ------- ----- ------- ---- ------- ------- ------- - -- ---- ------- -----------
添加表头
在 Table 组件中可以添加表头,在 ng-container 中添加 th 组件即可:
------------------- ------------------- ------------- -------------------------- ----------- ----------- ----------- ----------- --------------- ---------------------
自定义列
在 Table 组件中,还支持自定义列展示内容,在 ng-container 中添加 ng-arthur-pc-table-column 即可:
------------------- ------------------- ------------- ------------------------- -------------- ----- ----------------- --- -------------- ----- ----------------- --- -------------- --------------- ---------------------
MessageBox 弹出框
MessageBox 弹出框组件可以快速实现弹出框功能,类似于原生的 alert。
基本使用
使用 MessageBox 弹出框非常简单,只需要调用其 showMessage 方法即可弹出框:
------ - --------------------------- - ---- ---------------- ------ ----- ------------ - ------------------- ------------------ ---------------------------- -- ---------------- - ---------------------------------------- ----------- - -
带确认回调
在 MessageBox 中还可以添加确认回调,只需要传入 confirm 参数即可:
---------------------------------------- ---------- - -------- ---- ---------------- -- - -- ----- - --------------- - ---
总结
通过该使用教程,我们已经了解了如何使用 @ng-arthur/pc 组件库中的 Button、Table 和 MessageBox 等常用组件,希望可以对你的项目开发提供帮助。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067356890c4f7277583bc8