近年来，Mithril 成为前端界备受瞩目的 JS 框架之一。该框架提供了又轻量又快速的路由，渲染和数据流管理等功能。另一方面，Material Design 提供了现代化的设计语言来创建现代化的 Web 应用程序。为了更好地利用这两个工具，Google 推出了 Material Components for the Web，提供了大量的自定义组件，从而使得 Web 开发更加易于开发和维护。为了在 Mithril 中使用 Material Components，Google 开发了 material-components-mithril，这是一个学习和使用的很好的开源库。在这篇文章中，我们将为您讲解 npm 包 material-components-mithril 的使用方法。
安装
安装 material-components-mithril 很简单，首先需要在控制台使用以下命令来安装 Mithril 和 material-components-mithril。
--- ------- ------ ------- ---------------------------
使用
为了使用 material-components-mithril，必须加载该库。在文件顶部添加以下 import（ES6）或 require（CommonJS）语句。
------ - ---- ---------- ------ - ------ - ---- ------------------------------
或
--- - - ------------------- --- ------ - ----------------------------------------------
整个 Material 组件库是模块化的，每个模块都以它所表示的组件的名称命名。例如按钮是 button.js，卡片是 card.js。
现在，您可以使用如下方式创建 Material Design 风格的按钮。
---------------------- -
----- ---------- -
------ --------- - ------- ---- -- ------ ------
--
---现在，您可以在浏览器中使用此代码，看到 Material 风格的应用程序按钮。
属性
Material 组件是通过选项对象来定制的。每个组件都可以接受多种选项，这些选项将覆盖默认选项。我们来看一个例子，如何改变按钮的颜色和标签。
--------- - ------- ----- ------ ---------- ------ ------ ---- --
可以通过在该对象上设置属性来覆盖组件的默认选项。例如：
- --------- ---- -
这将禁用按钮的点击。此属性可以传递在 RadioButton，CheckBox 和 Switch 组件中使用，以及在其他所有组件中使用。属性 tip 提供了另一个示例，其中切换开关已更改为使用属性。
--------- - -------- ---------- --------- ---------- - --------- - ----------- - -- ---------- - ---- ----- ---- ------ --- -------- ----- --
开发速度加速
虽然 Material Design 组件是漂亮和可扩展的，但从头开始编写所有组件可能会很耗时。好消息是， Material 官方维护了一组 Material Design 组件的指南和样式资源，可以为 Mithril 的开发提供帮助。
以下是一些可帮助您开始 Material 设计的 Mithril 项目的有用 Sheets 和组件：
- Material Design Icons – 提供 Material Design 图标的样式资源。
- Material Design Color Tool – 样式资源，您可以使用 Material 调色板的颜色进行设计。
- Material Design Toolbar – 提供了一种通用的 toolbar 组件，适用于大部分 Material 设计应用程序。
结论
在本文中，我们已经学习了如何使用 Material Components for the Web 的 Mithril 组件。我们看到了如何使用这些组件并且如何通过传递属性定制它们。我们还介绍了一些工具，可以加速 Material 设计的 Mithril 应用程序的开发速度。
通过使用 material-components-mithril 库，您可以轻松地为自己的 Mithril 应用程序添加 Material Design 风格的组件。为了取得最好的效果，请务必阅读 Material Components for the Web 指南中有关每个组件的详细信息，并使用 Material Design 资源来定制您的样式。
希望您享受 Material Design 和 Mithril 带来的简单，快速和现代的 Web 应用程序开发。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600557f281e8991b448d50a1