前端开发中，我们经常使用 web component 技术来构建网站页面。而 Material Design Lite (简称 MDL) 是 Google 所推出的一套 Material Design 风格的 UI 框架，可以让网站有更加优美的界面。本篇文章主要介绍使用 npm 包 webcomponent-mdl 来实现 Material Design Lite 的 UI 组件。
webcomponent-mdl 简介
webcomponent-mdl 是一个 npm 包，提供了 Material Design Lite 的 UI 组件。它的主要作用是将 Material Design Lite 的 UI 组件封装成了 web component，可以像使用普通 HTML 标签一样来使用这些组件，同时也支持状态绑定、事件监听等功能。在使用 webcomponent-mdl 时，只需要引入所需的组件并注册使用即可。
webcomponent-mdl 的安装与引入
使用 webcomponent-mdl，首先需要安装它。在命令行终端中，执行以下命令即可：
npm install webcomponent-mdl
安装完成后，在 HTML 文件中引入 webcomponent-mdl 的 js 和 css 文件：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------
----- ---------------- -----------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------
-------
------
------- ----------------------------------------------------------------------------
-------
-------webcomponent-mdl 的组件使用
使用 webcomponent-mdl 可以像使用普通 HTML 标签一样使用它的 UI 组件。下面我们按照使用 webcomponent-mdl 的步骤，来实现一个 MDL 的按钮组件和输入框组件。
MDL 按钮组件
MDL 按钮组件分为三种类型：raised、flat、icon。我们以 raised 类型为例。在 HTML 文件中，添加如下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------
----- ---------------- -----------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------
-------
------
------- ----------------------------------------------------------------------------
----------- ------------ ---------------
-------
-------在以上代码中，我们通过在标签内添加 raised 属性来声明使用 raised 类型的按钮组件。在浏览器中打开 HTML 文件，可以看到一个 MDL 的 raised 类型按钮。
要指定按钮的样式、颜色等属性，可以使用标准的 HTML 属性，例如：
<mdl-button raised accent>click me</mdl-button>
以上代码声明了使用 raised 类型的按钮组件，并且颜色为 accent（MDL 颜色主题之一）。
MDL 输入框组件
MDL 输入框组件包括文本输入框、密码输入框、浮动标签输入框等。我们以文本输入框为例。在 HTML 文件中，添加如下代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------
----- ---------------- -----------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------
-------
------
------- ----------------------------------------------------------------------------
-------------- ------------ ----------------------
-------
-------在以上代码中，我们通过在标签内添加 label 属性来声明使用文本输入框组件，并且添加了标签名称。在浏览器中打开 HTML 文件，可以看到一个 MDL 的文本输入框。
要指定输入框的样式、大小等属性，也可以使用标准的 HTML 属性，例如：
<mdl-textfield label="Input text" type="password" rows="2"></mdl-textfield>
以上代码声明了使用文本输入框组件，并且指定了输入框的类型为密码输入框，行数为 2 行。
总结
本文介绍了使用 npm 包 webcomponent-mdl 来实现 Material Design Lite 的 UI 组件。通过以上介绍，我们可以轻松地使用 webcomponent-mdl 提供的 UI 组件，并且可以灵活地指定组件的各种样式和属性，从而构建出更加优美的网站页面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc83