介绍
angular4-icheck 是一个基于 Angular4 的开源项目，旨在在 Angular4 中使用 iCheck 插件，让开发人员拥有一个更好的界面开发体验。
安装
安装 angular4-icheck 最简单的方法是使用 npm 命令：
npm install angular4-icheck --save
执行完毕后，就可以在项目中使用 angualr4-icheck。
使用
首先需要在 app.module.ts 中引入：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ------------------
------ - ---------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
----------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -在需要使用的组件的模板文件中，直接使用：
<icheck title="Checkbox" [(ngModel)]="isChecked"></icheck>
支持的参数
icheck 组件支持以下参数：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| title | string | - | 显示的文本 |
| disabled | bool | false | 是否禁用 |
| checked | bool | false | 是否选中 |
| readonly | bool | false | 是否只读 |
| indeterminate | bool | false | 如果是，组件将处于不确定状态 |
| increaseArea | string | '' | 扩大点击区域 |
| labelHover | bool | true | 可选标签悬停 |
| cursor | string | 'pointer' | 手势 |
| checkboxClass | string | 'icheckbox_square-blue' | 复选框类 |
| radioClass | string | 'iradio_square-blue' | 单选框类 |
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
------- ---------------- ---------------------------------
-
--
------ ----- ------------ -
--------- - ------
-总结
angular4-icheck 是一个非常好用的 Angular4 插件，它提供了一系列方便易用的参数，让开发人员可以轻松地在 Angular4 中使用 iCheck 插件。当然，如果你有任何问题或者建议，也可以在 GitHub 上联系项目的开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005726081e8991b448e88c4