简介
ember-mdl 是一个基于 Google Material Design Lite 的 Ember.js 组件库。它包含了大量组件和 UI 元素，可以方便地帮助我们创建出美观、易用的 Web 应用程序。
在本篇文章中，我们将会介绍如何使用 ember-mdl 这个 npm 包来开发我们的 Web 应用程序。
安装
使用 npm 包管理器，我们可以轻松地安装 ember-mdl：
npm install --save ember-mdl
这里我们使用了 --save 参数，表示我们将会把 ember-mdl 添加到我们的项目依赖列表中。
引入
在我们的 Ember.js 应用程序中，我们需要在 app.js 中引入 ember-mdl：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ -------------------------- ------------- --------- --- --------- --- ---
在上例中，我们将 ember-mdl 组件库添加到了我们的 Ember.js 应用程序中，并且给它起了一个名字：emberMdl。这里我们使用了 ES6 的模块导入方式来引入 ember-mdl 库。
使用
现在我们已经成功地引入了 ember-mdl 库，我们可以开始在我们的 Ember.js 应用程序中使用这个库了。我们可以通过两种方式引入组件：
1. 直接引入
我们可以在组件的模板中直接引入所需要的组件：
{{#mdl-button}}
Click me!
{{/mdl-button}}这里我们通过 mdl-button 组件，创建了一个 Material Design Lite 风格的 button 按钮，并在按钮里放置了一个文字：Click me!。我们可以通过添加更多的属性来对按钮进行定制：
{{#mdl-button
class="mdl-button--raised mdl-button--colored"
onClick=(action "handleClick")}}
Click me!
{{/mdl-button}}这里我们添加了两个 CSS 类 mdl-button--raised 和 mdl-button--colored，来让按钮显示为 raised 状态和带有颜色的样式。
2. 使用组件包装器
我们也可以使用组件包装器来引入所需要的组件。在这种方式下，我们需要在组件的 JavaScript 文件中导入组件和包装器，并在模板中使用包装器：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -----------------------
------ ------ ---- ------------------------------------
------ ------- ---------------
-------
------------- -
------------------------ -----------
-
---在上例中，我们首先导入了一个名为 Button 的组件，接着导入了我们定义的组件模板，最后通过 export 关键字导出了一个继承自 Button 的组件。
在组件模板中，我们可以使用 {{yield}} 来插入组件的内容，例如按钮的文字：
<button class="mdl-button mdl-js-button" onClick={{action "handleClick"}}>
{{yield}}
</button>在我们的应用程序中，我们可以这样使用这个组件：
{{#my-button}}
Click me!
{{/my-button}}示例代码
这里给出一个 macOS Dock 风格的菜单的实例代码：
JavaScript
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -----------------------
------ ------ ---- ------------------------------------
----- -------- - ---------------------
----- ---
------ ---
------- ----
---
------ ------- ------------------
----------- --------------
-------
------ ---------
-----------------
----- -----------
------ -------
------- ----------
---
-----------------
----- -----------------
------ -------------
------- ----------------
---
-----------------
----- ---------------
------ -------
------- ----------
---
-----------------
----- ------------------
------ ----------
------- -------------
--
---
-------- -
---------- -
-------------------- -- ---- --------
--
---------------- -
-------------------- -- ---------- --------
--
---------- -
-------------------- -- ---- --------
--
------------- -
-------------------- -- ------- --------
-
-
---模板
-- -------------------- ---- -------
---------- ----------------------------
--- ----------------------- -------- ---------------------- ----------- ----------------------
------- ----- -- ----- --------
--- --------------------- ----------------
---------------- --------------
----- -----------------------------
---------- -----------
-------
--------------
-----
---------
-----CSS
-- -------------------- ---- -------
---------- -
-------- -----
--------------- ----
---------------- -------
------------ -------
---------- -
---------- -----
------ -----
------- --------
------- -----
-
-------- -
----------- -----
-------- --
------- --
-
------- -
-------- -----
--------------- ----
---------------- -----------
------------ -------
------ ------
------------- -----
---------- -----
------- -
------ -----
-
------ -
-------- -----
--------------- ----
---------------- -------
------------ -------
------------- -----
------ --------
---------- -----
-
-
-使用
{{dock-menu}}这里我们使用了 dock-menu 组件来显示我们的 macOS Dock 风格菜单。这个组件包含了四个菜单项，分别是 Home、Categories、Cart 和 Profile。每个菜单项都有自己的图标和标题。当用户点击某个菜单项时，会调用对应的回调函数，并在控制台打印出相应的日志。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1ea563576b7b1ecd0c