介绍
munish-ng2-fone 是一个基于 Angular2 的开源组件库，其特点是拥有丰富的 UI 组件，极大的方便了前端开发人员在项目中快速搭建出高质量的 UI 界面。
安装
使用 npm 安装 munish-ng2-fone：
npm install munish-ng2-fone --save
使用
在项目中导入依赖
在项目中引入 munish-ng2-fone 的依赖：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - ------------------- - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -基本组件
button 组件
<f-button type="primary">Primary</f-button>
属性：
type：按钮的类型。
input 组件
<f-input [(ngModel)]="name"></f-input>
属性：
ngModel： 组件的值。
radio 组件
<f-radio-group [(ngModel)]="radioValue"> <f-radio [label]="'Option 1'"></f-radio> <f-radio [label]="'Option 2'"></f-radio> <f-radio [label]="'Option 3'"></f-radio> </f-radio-group>
属性：
ngModel： 组件的值。label： 单选框标签的值。
进阶组件
grid 组件
<f-row> <f-col fxFlex="50">1</f-col> <f-col fxFlex="50">2</f-col> </f-row>
属性：
fxFlex： 占据父容器的大小。
datepicker 组件
<f-datepicker [(ngModel)]="date"></f-datepicker>
属性：
ngModel： 组件的值。
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
-------
------ ------------
------------- ----------------------------------
--------
------ ------------
------ ---- -------
--------
--------
--
--
------ ----- ------------ -
----- -----
-总结
munish-ng2-fone 提供了很多常用的 UI 组件，方便了前端开发人员快速构建出高质量的 UI 界面。在使用时，可以根据文档进行配置和开发，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3781e8991b448d7da3