前言
现在的前端技术越来越丰富，npm作为前端开发必不可少的工具之一，提供了许多优秀的开源包。而在这些开源包中，mithril-mdl-extended是一个非常实用的工具， 它可以帮助我们更好的实现Material Design风格的用户界面。本文将详细介绍该npm包的使用方法和示例代码，帮助大家更好地使用该工具。
介绍
mithril-mdl-extended是一个基于mithril.js和Material Design的npm包，提供了丰富的Material Design风格的组件。使用该包可以帮助我们快速构建一个美观、易于理解的用户界面，从而让我们更加专注于我们的业务逻辑。
mithril-mdl-extended提供了以下组件：
- Button
- Checkbox
- DatePicker
- Dialog
- Grid
- Icon
- Layout
- List
- Menu
- Progress
- Radio
- Slider
- Snackbar
- Switch
- TextInput
- Toolbar
其中，每个组件都有其特殊的用途和属性，我们会在后面的使用教程中详细介绍。
安装
首先，我们需要在项目中安装mithril-mdl-extended。可以使用npm安装，命令如下：
npm install mithril-mdl-extended
安装完成后，你就可以在你的代码中引入它了。
使用
接下来，我们将介绍使用过程中的注意事项和组件的使用方法。
Button
Button组件表示一个通用的按钮，可以用于在应用中的不同位置使用。这是一个非常基础的组件，提供了多种样式以及按钮的状态。
-- -------------------- ---- ------- ----- ------ - --------------------------------------- ------------------ ----- -- -- - ------ --------------------------------------------------------------------------- - -------- -- -- - ------------------------ - -- ------ ------ - ---展开代码
在上面的示例中，我们可以看到Button的使用方法，它提供了多个样式类名，可以使用它来实现各种不同的效果，这里我们演示了较为常用的三种。
mdl-button用于定义按钮样式mdl-js-button用于启用Javascript的样式（用于鼠标悬停显示波纹等效果）mdl-button--raised用于添加3D按钮效果mdl-button--colored用于使按钮变色
Checkbox
Checkbox组件表示复选框，可以用于在应用中选择多个选项。Checkbox的属性包括：checked、disabled、label、name、oncheck、value.
-- -------------------- ---- ------- ----- -------- - ----------------------------------------- -------------------- ----- -- -- - ------ ----------------------------- - -------------------------------------------------------------------------- - ------------------------------ - ----- ----------- --- ----------- -------- -- -- - ------------------------ - --- ----------------------------- ----------- -- --- - ---展开代码
在上面的示例中，我们可以看到Checkbox的使用方法，它使用label包裹了input和span，使得复选框具有可读性。
mdl-checkbox__container用于包裹label，方便管理mdl-checkbox用于基础样式的设定mdl-js-checkbox用于启用Javascript的样式（用于鼠标悬停显示波纹等效果）mdl-js-ripple-effect用于使鼠标悬停时产生波纹效果mdl-checkbox__input用于设定复选框的基本属性
Checkbox提供的属性有多种，通过这些属性的设置，可以实现不同的功能，如disabled用于禁用复选框，checked用于设定复选框初始的勾选状态，oncheck用于在勾选复选框时需要执行的操作等等。
DatePicker
DatePicker组件表示日期选择器，可以用于选择一个特定日期。DatePicker的属性包括：date、label、name、value.
-- -------------------- ---- ------- ----- ---------- - ------------------------------------------- ---------------------- ----- -- -- - ------ ----------------------------------------------------------------------------- - --------------------------------------------------------- - --------- ----- ------------ ------- - ------ -------- -- -- - ------------------------ - --- ----------------------------------------------- ----- --------- ------------------------------ ------- ----- - ----- ------ --- - ---展开代码
在上面的示例中，我们可以看到DatePicker的使用方法，它使用mdl-textfield__input和mdl-textfield__label等样式类名包裹了input和label，使其具有可读性。
mdl-textfield用于设定文本区域的基本样式mdl-js-textfield用于启用Javascript的样式（用于鼠标悬停显示波纹等效果）mdl-textfield--floating-label用于使文本框的标签浮动，并以标签形式展现is-focused用于设定文本框默认聚焦
同样的，DatePicker提供了多种属性可以设置不同的功能，如date用于指定日期，value用于设定DatePicker的初始值等等。
Dialog
Dialog组件表示对话框，可以用于显示一段对话框。Dialog的属性包括：body、buttons、classes、header、id、title.
-- -------------------- ---- ------- ----- ------ - --------------------------------------- ------------------ ----- -- -- - ------ ---------------------- - ---------------------------- - ------ ----- -- - ------ ---------- --- ---------------------------- - ----------------------------------- - -------- -- -- - -------------- - -- -------- -- --- - ---展开代码
在上面的示例中，我们可以看到Dialog的使用方法，它使用了mdl-dialog、mdl-dialog__content和mdl-dialog__actions等样式类名，使得对话框更加美观、易用。
mdl-dialog用于设定对话框的样式mdl-dialog__content用于设定对话框内容样式mdl-dialog__actions用于设定对话框操作样式
同样的，Dialog通过提供多种属性，可以用于设定对话框中的按钮、标题等等。
##结语
在本文中，我们对npm包mithril-mdl-extended进行了详细的介绍，并提供了针对各个组件的使用示例。这些组件可以帮助我们更加快速、便利地实现Material Design风格的用户界面，提高我们的工作效率，从而更加专注于我们的业务逻辑。我们相信本文对于初学者们也有一定的指导意义。如有相关问题，欢迎随时与我们联系。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8481e8991b448d9186
