我可以在我的 ruby on rails 应用程序中使用 material design lite 扩展吗？

Question

我需要更多组件才能在 rails 应用程序上开发 ruby。我可以直接在我的资产文件夹中使用包含它们的 mdl-ext 组件吗，因为没有 gem 用于通过捆绑安装程序安装它。

Material 此处提供精简设计扩展 https://github.com/leifoolsen/mdl-ext

我想将它与这里的 material-design-lite 一起使用 https://rails-assets.org/#/components/mdl。笔记！ Material design lite 我已经在用了。

如果可能，将其包含在资产管道中的最佳方式是什么？

Answer 1

您不需要 npm 安装它，您可以像使用任何其他 css 框架（bootstrap 等）一样使用它。放在应用程序布局文件的头部下方。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?
family=Material+Icons">
<link rel="stylesheet" 
href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

然后使用像 btn 这样的东西，就像你写普通 html 和自定义 css 类

<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-
 ripple-effect mdl-button--accent">
 Button
</button>

https://getmdl.io/started/index.html

Answer 2

有一个 gem 用于使用 Material Design Lite with Ruby。

在 Gemfile 中添加：

gem 'material_design_lite-sass'

在/app/assets/stylesheets/application.scss中添加：

@import 'material';

请注意，如果您的扩展名不是 'scss'，请务必阅读 rubysamuria 的详细说明。

在app/assets/javascripts/application.js中添加：

//= require material

请注意，组件可用于此。如果愿意，您甚至可以单独添加它们。

Answer 3

是的，你可以。

我将 MDL 与 gem material_design_lite-sass 一起使用，我通过从 [= GitHub 存储库的 15=] 目录。我还从 eq repository 的 build 目录下载了 eq.js。有关更多信息，请参阅 mdl-ext 的自述文件。（不用担心缩小文件 - 资产管道会为您缩小）

然后我将这些文件中的每一个都放在 Rails 应用程序 vendor/assets 下的 javascripts 或 stylesheets 目录中。

最后，我在资产清单文件中添加了 require 语句，以将它们包含在资产管道中：

// app/assets/javascripts/application.js

//= require eq
//= require mdl-ext

和

// app/assets/stylesheets/application.scss

@import 'mdl-ext-eqjs';

我可以在我的 ruby on rails 应用程序中使用 material design lite 扩展吗？

Can I use material design lite extensions in my ruby on rails app?

ruby-on-rails

material-design

material-design-lite