npm 包 material-components-mithril 使用教程-JavaScript中文网-JavaScript教程资源分享门户

近年来，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。

npm install --save mithril material-components-mithril

使用

为了使用 material-components-mithril，必须加载该库。在文件顶部添加以下 import（ES6）或 require（CommonJS）语句。

import m from 'mithril';
import { button } from 'material-components-mithril';

或

var m = require('mithril');
var button = require('material-components-mithril').button;

整个 Material 组件库是模块化的，每个模块都以它所表示的组件的名称命名。例如按钮是 button.js，卡片是 card.js。

现在，您可以使用如下方式创建 Material Design 风格的按钮。

m.mount(document.body, {
  view: function() {
    return m(button, { raised: true }, 'Click me!');
  },
});

现在，您可以在浏览器中使用此代码，看到 Material 风格的应用程序按钮。

属性

Material 组件是通过选项对象来定制的。每个组件都可以接受多种选项，这些选项将覆盖默认选项。我们来看一个例子，如何改变按钮的颜色和标签。

m(button, { raised: true, color: 'primary', label: 'Click me!' })

可以通过在该对象上设置属性来覆盖组件的默认选项。例如：

{ disabled: true }

这将禁用按钮的点击。此属性可以传递在 RadioButton，CheckBox 和 Switch 组件中使用，以及在其他所有组件中使用。属性 tip 提供了另一个示例，其中切换开关已更改为使用属性。

m(switch, { checked: isChecked, onchange: function() { isChecked = !isChecked; } }, 'Enabled', { tip: 'This will enable the settings menu' })

开发速度加速

虽然 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