ng2-zk 是一个基于 Angular 2+ 的 UI 组件库，旨在为 Angular 开发者提供简单易用、风格美观、易于个性化配置的 UI 组件。
本教程将为你介绍如何使用 npm 包 ng2-zk，从安装、引入、使用到自定义样式等方面进行详细讲解。
安装
ng2-zk 是一个 npm 包，因此安装非常简单。只需要在命令行工具中运行以下命令即可：
npm install ng2-zk --save
运行该命令后，ng2-zk 包及其依赖项将被下载并安装到您的项目中。同时，--save 选项将 ng2-zk 添加到您的项目的依赖项列表中，以便在后续构建项目时自动安装。
引入
安装完成后，您可以将 ng2-zk 中的组件添加到您的 Angular 2+ 项目中。首先，您需要在您的模块文件中导入 ng2-zk 模块：
-- -------------------- ---- -------
------ - ---------- - ---- ---------
-- ---------
-----------
-------- -
-- -----------
----------
--
-- -- --------- ------
--
------ ----- --------- - -这样，在您的项目中就可以使用 ng2-zk 中的各种组件了！
使用
ng2-zk 中提供了一些基本的 UI 组件，如 button、input、select、radio、checkbox、switch 等。这些组件可以直接在 HTML 中使用。
以 button 组件为例，您可以按照以下方式在 HTML 中使用：
<zk-button zkType="primary" (click)="onClick()">Click me!</zk-button>
上述代码将在页面上创建一个蓝色的按钮，并在点击时触发 onClick() 函数。注意，这里的 zkType 属性指定了按钮的类型，可选值包括 primary、secondary、danger 和 link。
除了 button 组件外，其他组件的使用方式也类似。您可以在 ng2-zk 的官方文档中查看各个组件的详细用法。
自定义样式
ng2-zk 的组件样式可以通过 CSS 自定义。每个组件的样式都有自己的类名，您可以使用这些类名来修改组件的样式。
以 button 组件为例，您可以在 CSS 文件中添加以下代码来修改按钮的背景色和字体大小：
.zk-btn {
background-color: #3b8cff;
font-size: 16px;
}这样，在页面上添加了该样式表后，所有的 button 组件的背景色将变为蓝色，字体大小变为 16 像素。
结语
ng2-zk 是一个优秀的 Angular UI 组件库，具有美观易用、易于个性化配置等特点。本文对其安装、引入、使用和自定义样式进行了详细的讲解，希望对您的 Angular 开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab181e8991b448d8470