引言
@ntesmail/shark-angular2 是一款基于 Angular2 框架的 UI 组件库，可以方便前端开发人员快速的开发 Web 应用程序。
本文将为你讲解如何使用 @ntesmail/shark-angular2，并提供示例代码和实践指导，帮助你更好地使用该 npm 包。
安装
使用 npm 进行安装：
--- ------- ------------------------
快速开始
1. 引入组件
a) 通过 NgModule 引入
在你的根模块中引入：
------ - ----------- - ---- ---------------------------
-----------
-------- -
-----------
-
--
------ ----- --------- - -你现在可以在你的应用中使用所有的 Shark 组件。
b) 通过 import 引入
如果你只想使用部分组件或者想要更加灵活的引入组件，你可以在你的组件中引入：
------ - -------------------- - ---- --------------------------- ------------ --------- --------------- --------- -------------------------------- ----------- ---------------------- -- ------ ----- ----------- - -
2. 使用组件
现在你已经成功的引入了 @ntesmail/shark-angular2 组件库，接下来我们来看下如何使用组件。
a) SharkButtonComponent
SharkButtonComponent 是一个按钮组件，他支持基本的按钮样式，如：主按钮、次按钮以及禁止状态的按钮。
在你的组件中引入：
------ - -------------------- - ---- --------------------------- ------------ --------- --------------- --------- -------------- ----------------------------------------- ----------- ---------------------- -- ------ ----- ----------- - -
如上面的代码所示，你可以在组件中使用 <shark-button> 标签来使用 SharkButtonComponent 组件。你还可以通过在组件中使用 [] 语法来设置组件的属性，如：type 属性设置为 primary，表示该按钮是主按钮。
b) SharkGridComponent
SharkGridComponent 是一个表格组件，它提供了表格的基本功能，如：排序、筛选、分页等等。
在你的组件中引入：
------ - ------------------ - ---- ---------------------------
------------
--------- ---------------
--------- -
----------- ------------- ---------------------------------
--
----------- --------------------
--
------ ----- ----------- -
----- ------
-------- ------
------------- -
--------- - -- ----- -------- ---- -- -- - ----- ------ ---- -- ---
------------ - -- ------ ------- ------- ---- -- - ------ ------ ------- ---- ---
-
-如上面的代码所示，你可以在组件中使用 <shark-grid> 标签来使用 SharkGridComponent 组件。你还可以通过在组件中使用 [] 语法来设置组件的属性，如：data 属性设置为 data，表示表格的数据源；columns 属性设置为 columns，表示表格的列定义。
3. 自定义样式
当你需要修改组件的样式时，你可以通过 CSS 来修改。我们提供了一些为了方便定制的变量，你可以在 src/scss/_varibables.scss 文件中找到他们，例如：按钮一些常用样式变量设置，你可以通过设置以下变量来修改样式：
---------------------- -------- -- ------ ------------------------ ------------ -- ------ ---------------------- -------- -- ------- ---------------------- -------- -- ------- --------------------- -------- -- -------
如上面的代码所示，你可以通过修改 $button-primary-color 值来修改主按钮的背景色。
结语
@ntesmail/shark-angular2 是一款非常优秀的 UI 组件库，它为 Angular2 开发者提供了一个非常方便的工具包。希望本文能够帮助你更加深入的理解和使用该组件库。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066bce967216659e244d05