ng-kux 是一个适用于 Angular 的 UI 组件库。它拥有一系列常用组件，包括按钮、表单、弹窗、图标等等，且有良好的可定制性。
安装与使用
- 安装
在命令行中使用 npm 安装：
npm install ng-kux --save
- 引入
在工程的 app.module.ts 中引入：
import { NgKuxModule } from 'ng-kux';并将其添加到 imports 数组里：
-- -------------------- ---- -------
-----------
------------- -
------------
--
-------- -
--------------
-----------
--
---------- --------------
--
------ ----- --------- - -- 使用
现在你可以使用 ng-kux 的组件了，例如：
<kux-button text="点击我"></kux-button>
组件列表
以下是 ng-kux 中的组件列表：
- kux-button：按钮
- kux-input：输入框
- kux-checkbox：复选框
- kux-radio：单选框
- kux-select：下拉框
- kux-modal：模态框
- kux-tooltip：提示框
- kux-icon：图标
组件 API
kux-button
Inputs
- text: string - 按钮文字
Outputs
- buttonClick: Event - 按钮点击事件
kux-input
Inputs
- label: string - 标签文本
- placeholder: string - 占位符
- value: string - 输入框的值
- readonly: boolean - 是否只读
Outputs
- valueChange: Event - 值改变事件
kux-checkbox
Inputs
- label: string - 标签文本
- checked: boolean - 是否选中
Outputs
- checkedChange: Event - 是否选中改变事件
kux-radio
Inputs
- label: string - 标签文本
- checked: boolean - 是否选中
Outputs
- checkedChange: Event - 是否选中改变事件
kux-select
Inputs
- label: string - 标签文本
- options: Array<selectoption> - 下拉框选项列表
- selected: string - 已选中的选项值
Outputs
- selectedChange: Event - 选中的选项改变事件
kux-modal
Inputs
- title: string - 标题
- content: string - 内容
- show: boolean - 是否显示
Outputs
- modalConfirm: Event - 确认事件
- modalCancel: Event - 取消事件
kux-tooltip
Inputs
- content: string - 提示内容
kux-icon
Inputs
- type: string - 图标类型
定制
ng-kux 中的组件都可以根据需求进行定制，通过覆盖默认样式或者自定义模板。下面以 kux-button 组件为例，展示定制的方式：
- 覆盖默认样式
.kux-button {
background-color: red;
color: #fff;
}- 自定义模板
<kux-button> <i class="fa fa-plus"></i> 新建 </kux-button>
示例代码
以下是 kux-button 的一个使用示例：
<kux-button text="点击我" (buttonClick)="handleClick($event)"></kux-button>
代码中，我们为 kux-button 绑定了一个 buttonClick 事件，当用户点击按钮时，handleClick($event) 函数会被触发。
handleClick(e){
console.log('点击了按钮');
}总结
ng-kux 是一个非常实用的 UI 组件库，它为我们的前端开发工作带来了很大的便利。通过本文的介绍，相信读者已经对于 ng-kux 的使用与定制有了更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d8b81e8991b448db4c3