npm 包 @ntesmail/shark-angular2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

引言

@ntesmail/shark-angular2 是一款基于 Angular2 框架的 UI 组件库，可以方便前端开发人员快速的开发 Web 应用程序。

本文将为你讲解如何使用 @ntesmail/shark-angular2，并提供示例代码和实践指导，帮助你更好地使用该 npm 包。

安装

使用 npm 进行安装：

npm install @ntesmail/shark-angular2

快速开始

1. 引入组件

a) 通过 NgModule 引入

在你的根模块中引入：

import { SharkModule } from '@ntesmail/shark-angular2';

@NgModule({
  imports: [
    SharkModule
  ]
})
export class AppModule { }

你现在可以在你的应用中使用所有的 Shark 组件。

b) 通过 import 引入

如果你只想使用部分组件或者想要更加灵活的引入组件，你可以在你的组件中引入：

import { SharkButtonComponent } from '@ntesmail/shark-angular2';

@Component({
  selector: 'my-component',
  template: '<shark-button></shark-button>',
  directives: [SharkButtonComponent]
})
export class MyComponent { }

2. 使用组件

现在你已经成功的引入了 @ntesmail/shark-angular2 组件库，接下来我们来看下如何使用组件。

a) SharkButtonComponent

SharkButtonComponent 是一个按钮组件，他支持基本的按钮样式，如：主按钮、次按钮以及禁止状态的按钮。

在你的组件中引入：

import { SharkButtonComponent } from '@ntesmail/shark-angular2';

@Component({
  selector: 'my-component',
  template: '<shark-button [type]="\'primary\'">主按钮</shark-button>',
  directives: [SharkButtonComponent]
})
export class MyComponent { }

如上面的代码所示，你可以在组件中使用 <shark-button> 标签来使用 SharkButtonComponent 组件。你还可以通过在组件中使用 [] 语法来设置组件的属性，如：type 属性设置为 primary，表示该按钮是主按钮。

b) SharkGridComponent

SharkGridComponent 是一个表格组件，它提供了表格的基本功能，如：排序、筛选、分页等等。

在你的组件中引入：

-- -------------------- ---- -------
------ - ------------------ - ---- ---------------------------

------------
  --------- ---------------
  --------- -
    ----------- ------------- ---------------------------------
  --
  ----------- --------------------
--
------ ----- ----------- -
  ----- ------
  -------- ------

  ------------- -
    --------- - -- ----- -------- ---- -- -- - ----- ------ ---- -- ---
    ------------ - -- ------ ------- ------- ---- -- - ------ ------ ------- ---- ---
  -
-

如上面的代码所示，你可以在组件中使用 <shark-grid> 标签来使用 SharkGridComponent 组件。你还可以通过在组件中使用 [] 语法来设置组件的属性，如：data 属性设置为 data，表示表格的数据源；columns 属性设置为 columns，表示表格的列定义。

3. 自定义样式

当你需要修改组件的样式时，你可以通过 CSS 来修改。我们提供了一些为了方便定制的变量，你可以在 src/scss/_varibables.scss 文件中找到他们，例如：按钮一些常用样式变量设置，你可以通过设置以下变量来修改样式：

$button-primary-color: $mdblue; // 主按钮背景色
$button-secondary-color: $mdgrey-600; // 次按钮背景色
$button-success-color: #52c41a; // 成功按钮背景色
$button-warning-color: #faad14; // 警告按钮背景色
$button-danger-color: #f5222d; // 危险按钮背景色

如上面的代码所示，你可以通过修改 $button-primary-color 值来修改主按钮的背景色。

结语

@ntesmail/shark-angular2 是一款非常优秀的 UI 组件库，它为 Angular2 开发者提供了一个非常方便的工具包。希望本文能够帮助你更加深入的理解和使用该组件库。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244d05