介绍
ember-material-components 是一个基于 Google Material Design 设计标准的组件库，结合了 Ember.js 框架的特性，能够快速地开发出具有统一视觉风格的 web 应用。该组件库涵盖了众多常用的 Web 前端组件，如按钮、文本框、下拉框、卡片等等，并提供了丰富的主题和样式支持。
安装
安装 ember-material-components 非常简单，只需要执行以下命令即可：
npm install ember-material-components
使用
在你的 Ember 应用中，可以利用 ember-cli 命令行工具生成组件，并在目录结构中创建以下文件：
app/
└── components/
├── mdc-input.js
└── mdc-input.hbs在 mdc-input.hbs 中编写如下代码：
-- -------------------- ---- -------
----- ---------------------------- ----
---------------- ----------- -------------------- --------- -- -------------
-------
--------------- ---- ------ ---------------------
---------------------
---------
-----------------------
----------------------------
--
----- --------
---- -----------------------------------
---- --------------------------------- ------------------------------------------------------------
------
-------
------------------上述代码中，mcc-textfield 和 input 组件都是来自 ember-material-components 库。mcc-textfield 是一个文本框组件，包装了 input 元素和 label 元素，并在用户输入时提供闪烁的效果。在该组件中，我们使用了 value、 type、placeholder 等 input 组件的属性，同时使用了 action 和 mut helper 管理输入内容以及错误信息。
在 mdc-input.js 中编写如下代码：
// app/components/mdc-input.js
import Component from '@ember/component';
export default Component.extend({
classNames: ['mdc-input-container']
});在上面的代码中，我们定义了 mdc-input 组件，并将其 class 设置为 'mdc-input-container'，这样就能够利用 ember-material-components 提供的样式来渲染组件。
最后，在你的模板文件中编写如下代码：
{{!-- app/templates/index.hbs --}}
{{#mdc-input value=value placeholder="请输入内容"}}
{{/mdc-input}}这段代码中，我们已经能够在模板中使用我们刚刚编写的 mdc-input 组件，只需要将需要的值传入 value 和 placeholder 属性中即可。
示例
在接下来的示例中，我们将演示如何使用 ember-material-components 组件库，开发一个简单的表单。
1. 安装组件库
首先，我们需要安装 ember-material-components 组件库。在终端中切换到你的项目目录，执行以下命令：
npm install ember-material-components
2. 创建组件
现在，我们需要创建一些组件，以及在 template 中使用这些组件。我们需要创建以下组件：
- login-form 表单组件
- email-input 组件，用于输入邮箱地址
- password-input 组件，用于输入密码
在终端中执行以下命令，创建这些组件：
ember generate component login-form ember generate component email-input ember generate component password-input
在生成的组件文件中，分别编写以下代码：
-- -------------------- ---- -------
-- ----------------------------
------ --------- ---- -------------------
------ ------- ------------------
-------- -
------------- --------- -
------------------- --------- --------- --------------
-
-
---<!-- app/templates/components/login-form.hbs -->
<form class="login-form" {{on 'submit' (prevent-default (action 'submit' email password))}}>
<fieldset>
{{yield}}
</fieldset>
<button type="submit">登录</button>
</form>// app/components/email-input.js
import Component from '@ember/component';
export default Component.extend({
classNames: ['email-input']
});<!-- app/templates/components/email-input.hbs -->
{{#mdc-input label="邮箱地址" as |input|}}
{{input type="email" value=value maxlength=50}}
{{/mdc-input}}// app/components/password-input.js
import Component from '@ember/component';
export default Component.extend({
classNames: ['password-input']
});<!-- app/templates/components/password-input.hbs -->
{{#mdc-input label="密码" as |input|}}
{{input type="password" value=value minlength=6 maxlength=20}}
{{/mdc-input}}在上述代码中，我们在 login-form 组件中创建了一个表单，并在 password-input 组件和 email-input 组件中分别使用 mdc-input 组件进行输入框的封装。同时，我们也定义了 submit 方法和对应的 form action，用于表单提交和数据传递。
3. 在模板中使用组件
最后，我们需要在模板文件中使用这些组件，以便呈现出一个完整的表单。在 app/templates/index.hbs 文件中，编写以下代码：
{{#login-form as |form email password|}}
<div class="inputs">
{{email-input value=email id="email"}}
{{password-input value=password id="password"}}
</div>
{{/login-form}}我们通过 login-form 组件定义了一个登录表单，使用 email-input 和 password-input 两个组件进行采集用户的邮箱地址和密码。在上述代码中，我们将 email-input 和 password-input 的 value 属性绑定到 login-form 组件的 email 和 password 变量，使得 login-form 组件能够最终接收到这些数据，并执行对应的操作。
结语
ember-material-components 可以帮助我们快速、便捷地开发出样式统一、符合 Material Design 标准的前端组件。在本文中，我们通过一个简单的表单案例了解了如何使用该库，并创建了自己的组件。通过这篇文章，读者可以获得深度学习和实践经验，以及更有价值的指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005731481e8991b448e9400