前言
ember-icis-widget 是一个为 ember 开发者提供的一个轻量级且易于使用的 npm 包，它可以用于帮助我们快速的开发出一些常用的控件或者组件。本篇文章将会详细介绍如何使用 ember-icis-widget，如有不懂的地方可以通过示例代码和文章中的详细说明来了解。
环境准备
在使用 ember-icis-widget 的过程中，你需要事先安装以下环境：
Node.js和npmember环境
安装 Node.js 和 npm 的方式可以参考官方文档下载页面。安装 ember 环境可以通过以下命令进行：
npm install -g ember-cli
安装 ember-icis-widget
安装 ember-icis-widget 的方式可以通过以下命令进行：
ember install ember-icis-widget
安装后，你可以通过以下方式进行检查是否安装成功：
ember generate icis-widget-demo
如果执行成功，则证明你已成功安装 ember-icis-widget。
示例代码
在这里，我们将以一个 table 控件为例，来快速了解如何使用 ember-icis-widget。
模板代码
{{#icis-table data=tableData}}
{{#icis-table-column header="Name" property="name"}}
{{#icis-table-column header="Gender" property="gender"}}
{{#icis-table-column header="Age" property="age" width=50}}
{{/icis-table}}JavaScript 代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
---------- -
- ----- -------- ------- ------- ---- -- --
- ----- ------- ------- --------- ---- -- --
- ----- -------- ------- ------- ---- -- --
- ----- -------- ------- --------- ---- -- -
--
---CSS 代码
-- -------------------- ---- ------- ----------- -- - ----------------- -------- ------ ----- ------------ ----- - ----------- -- - -------- ---- ------- --- ----- -------- - ----------- ------------------ - ----------------- -------- -
提供的控件和组件
在 ember-icis-widget 中提供了许多简单易用的控件和组件，在这里我们将列举其中的部分：
icis-progressbar
用于展示进度条的控件。
{{icis-progressbar value=100}}icis-form
用于提交表单的组件。
-- -------------------- ---- -------
------------ ---------------- -----------
---- -------------------
------ ----------------------------
------- -------------- ---------- ----------------------
------
---- -------------------
------ ------------------------------------
------- ------------------ -------------- --------------- ----------------------
------
------------- ---------------
--------------icis-select
用于选择框的控件。
{{#icis-select value=selectedOption onChange=(action 'onSelect')}}
{{#each options as |option|}}
<option value={{option}}>{{option}}</option>
{{/each}}
{{/icis-select}}指导意义
通过以上示例，我们可以看到 ember-icis-widget 为我们提供了许多常用的控件和组件。正如我们在开发过程中需要引用许多第三方工具库一样，这些控件和组件可以让我们更加舒适和方便的进行页面开发。更重要的是，在我们利用 ember-icis-widget 进行开发的同时也可以更好的理解如何使用 ember 开发页面，从而更好地学习和掌握 ember。
结尾
本文中我们对于 ember-icis-widget 的基本使用、其提供的控件和组件以及相关现实意义做了详细的介绍。在实际开发过程中如果有其他相关疑问，可以详细查阅官方文档或者其他相关资料。在日后的开发和学习中，也可以通过 ember-icis-widget 获得更便捷、更高效的页面开发方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecadc