npm 包 @ng-arthur/pc 使用教程

阅读时长 5 分钟读完

简介

@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

纠错
反馈