问题标签 [material-components-web]

使用材料组件，我试图弄清楚如何使用组件基础的方法。

例如，我有

在我的 JS 中，我有

如您所见，我的目标是尝试使用类setProgress中的方法MDCLinearProgressFoundation。虽然这不起作用，我不确定我做错了什么，因为它也没有出错。

Codepen - https://codepen.io/ErraticFox/pen/LdwYxb

我正在努力让 Webpack 4.0 编译我想使用 Google 材料设计 SASS 文件的 SASS。我认为这是无法访问 node_modules 文件夹中的 SASS 文件的问题。

我想通过使用：

包括：path.resolve(__dirname, 'node_modules/@material'),

将使 webpack 能够获取 Material SASS 文件。但我得到了错误：

感谢能够包含 Google 材料 SASS 文件夹的任何帮助。

我们从带有较旧 Ruby on Rails 3.2 应用程序的 MDC-Web 开始。

当包含整个 MDC-Web 包（CSS + JS）时，一切正常，但在尝试使用 MDC-Web 的单个包时会遇到问题。

当我们使用单个包时，我们得到一个错误“window.mdc.autoInit 不是函数”。

我们的代码：

当我们使用完整的包（上面注释掉）时一切都很好，但是当我们只包含单个包时会失败，这会导致浏览器的 JS 控制台出现错误：

当我们在控制台检查时 window.mdc.autoInit 确实存在：

但不是函数。

有谁知道我们做错了什么/我们如何解决这个问题？（我们希望使用单独的 MDC-web 包来避免与我们在站点的其余部分中使用的引导程序发生冲突，同时我们会一点一点地迁移。）

谢谢

我有一个简单的 React 组件，它可以从我的道具中的数组中呈现多个按钮。我在 DidMount 上应用了波纹，但是，它只附加在第一个按钮上，其余的都被忽略了。看起来 attachTo 只需要第一个元素。是否有另一种方法可以附加到 didmount 上的所有按钮？

最终标记

更新 我能够找到一种方法来使用每个按钮的 attachTo，但似乎仍然有更好的方法。我将 componentDidMount() 更改为：

然后将我的渲染更改为

有没有办法做到这一点而不必遍历数组？

我尝试了这个示例，MDC for Web，但由于某种原因没有工作。https://material.io/develop/web/docs/getting_started

我正在寻找使用 phonegap/cordova 的 Material io (MDC) 初学者教程。

谢谢

我正在使用 Google Material Components for web 构建一个网站。我在我的网站上添加了一个抽屉，我想添加一个标题图片，但我不知道该怎么做。这是 Material Design 网站上的抽屉部分：

https://material.io/develop/web/components/drawers/

如何使用 MDCSnackbarFoundation ？使用 MDCSnackbar

该文档不够清晰，无法了解。 https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#using-the-foundation-class

这是我的代码，我需要为它绑定 MDCSnackbarFoundation。

logger = new MDCSnackbar($selector[0]);

谢谢

我试图仅包含 Material Components Web 中我需要的组件，但我无法让组件初始化。目标是让所有相同类型的组件在加载时初始化，所以我认为自动初始化将是可行的方法。

这会导致控制台错误“未捕获的类型错误：无法读取未定义的属性‘autoInit’”

我不确定我是否缺少依赖项，也找不到独立组件实现的简明来源。

这是一个 WordPress 项目。我也在使用 webpack。

提前感谢您的帮助。

我将 Material Design 与我的非 Node.js 应用程序一起使用。我需要在我的 HTML 项目中使用Material 概述的文本字段（带有前导图标） 。Material.io 网站显示了某些组件的 JavaScript 代码，但不显示其他组件。如何在我的 HTML 项目中添加概述的文本字段组件？

下面是我的代码：

这段代码的小提琴：jsfiddle

我正在关注这里的材料设计教程。本教程遵循 Node JS 方法并使用 npm 安装材料设计组件。这很好，我让 MDC 101 项目完全按照教程中的方式运行。一旦我开始输入文本，文本框标签就会很好地浮动到左上角，如页面底部所示。

但是，我想在我的 Scala Play 网络服务中使用 Material Design 组件，因此我将 CSS 链接和 JS 脚本插入到我的网页中（代码如下），如此处所述。我的页面的 HTML 如下所示：

如果您在浏览器中渲染它，可以看到在显示 MDC 文本字段时，标签不会像在 Node.js 下运行的教程示例中那样浮动。

我在这里想念什么？我怀疑这与某些 Javascript 未激活有关（此处为 Javascript noob）