问题标签 [material-components-web]

我用 Material Design 组件制作了一个表格。

我的 TextField 浮动标签在 AutoFill 填充输入时浮动，但在用户输入时不会浮动。

如您所见，既不通过 JavaScript 编辑字段，也不输入它们会使标签浮动。只有使用自动填充。此外，autoInit();似乎不起作用。

材料.io

从https://material.io/网站（Google 官方规范？），当我按照路径访问“Material Design UI”Web 组件时，我最终来到了这里：

https://github.com/material-components/material-components-web/

聚合物项目

从https://www.polymer-project.org/网站，当我按照路径访问“Material Web Components”时，我最终来到了这里：

https://github.com/material-components/material-components-web-components

我不明白这些组件集之间的区别，但想将“官方”谷歌网络组件用于我正在创建的网络应用程序。

我在我的 vue.js 应用程序中使用 mdc-tab-scroller。我希望在“滚动选项卡”部分下具有滚动行为。尝试了不同的方法，但不知道如何使其工作。这是我对 vue.js 和材料设计组件的第一次体验，所以我真的不知道我是否走在正确的实现道路上。

细节

我研究了 Web 的 Material Components (MDC) 并开始使用 CDN（托管的 CSS 和 JavaScript 库）：

• https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css
• https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js

这得益于他们在 [ 1 ]中的入门文档页面。同样，MDC 有这个前身斜线灯库Material Design Lite (MDL)，您可以轻松地自定义主题颜色。它可以通过其自定义 CSS 主题生成器来完成。^{[ 2 ]}

但是，根据 MDC Web 的主题指南：^{[ 3 ]}

... 目前，MDC Web 支持使用 Sass 和 CSS 自定义属性进行主题化，一旦该服务可用，还计划支持 CDN。

事实证明，目前无法通过 MDC 的 CDN URL 修改主题颜色。

再次回到我的问题，如何使用 CDN 在新的 MDC for Web 中设置主要颜色和次要颜色？

参考

1. 入门，Web 的 Material 组件
2. 自定义 CSS 主题生成器，Material Design Lite
3. 主题指南，Web 的 Material Components

在我的页面中，我有两个具有相同项目的 Material Design Component 抽屉。一种是永久用于桌面/平板电脑显示，另一种是隐藏/模态用于移动显示。

两者都被初始化：

我有一个切换另一个的javascript：

仍然存在的一个错误是，在一个抽屉上选择一个项目不会在另一个抽屉上选择相同的项目。如果我从一种尺寸转换到另一种尺寸，则所选项目将与内容不匹配。

我可以链接两个抽屉，以便在一个抽屉上的选择会改变另一个抽屉的状态（尤其是在不触发“另一个”抽屉上的事件或进入递归循环交叉通知循环的情况下）？

编辑：增加赏金。完整源码。

我有两个选项卡（TAB1 和 TAB2）。活动选项卡是 TAB1 (mdc-tab--active)。我想使用 javascript 将活动选项卡设置为 TAB2。

谢谢。

我的代码：

我正在使用最新版本的 material-components-web

https://unpkg.com/material-components-web@latest/dist/material-components-web.css

https://unpkg.com/material-components-web@latest/dist/material-components-web.js

我目前正在制作一个使用 AJAX 更改页面内内容的 Web 应用程序，但我遇到了一个问题，即让 javascript 应用于已加载的元素而不是在页面上启动。

例如，如果我的起始 HTML 中有一个调用 AJAX 函数的按钮，

从一个单独的页面得到这个 MDC 按钮，

然后，如果我的 app.js 文件中有这个，

然后，当我单击原始按钮以使新按钮进入页面时，涟漪不会应用，因为新按钮并未从页面开始。

将新按钮添加到页面后，如何在新按钮上初始化涟漪？

这导致了我的第二个问题，那就是，如果可以通过 AJAX 初始化 New Button 上的波纹，那么我将如何让它适应通过 AJAX 添加的任何新 MDC 内容无论它只是 MDC 按钮，还是根本没有任何按钮但有其他需要 Javascript 才能运行的 MDC 内容。像抽屉或文本字段。

使用 Web CDN的 Material Components 进行前端设计的示例并没有多大帮助。

我找到了这个模态抽屉的演示，但它似乎没有使用已发布的 CSS 和 JavaScript CDN。 演示：模态抽屉演示

如何使用 Material Components 的 CDN 实现模态抽屉？

我正在使用这个

https://material.io/develop/web/components/tabs/tab-bar/

制作标签栏

而这个 JS

调用单击工作（通过代码或使用鼠标手动），并发出事件并警告“1”。但是我宁愿使用该activateTab功能，但它只会使选项卡处于活动状态，但不会发出事件。

有谁知道这里有什么问题？

我正在尝试按照 Material Component Web's Getting Started Guide将Material Web Components实现到我的 Web 应用程序中。

我能够成功设置 Webpack (V3) 来为 Web 组件加载 SASS。这是在遇到包含路径问题之后。我可以通过将此行添加到我的webpack.config.js.

但是，我没有成功编译 JS。

有问题的组件是 Material Web 的Top App Bar。

在我的主 js 文件中，我有以下内容：

我最初把它写成：

但是 Webpack 抱怨找不到文件：

找不到模块：错误：无法解析“./node_modules/@material/top-app-bar/index”。

我尝试webpack.config.js根据 Webpack 的Module.alias文档将此代码添加到我的 .

唉，代码编译但在 Chrome 的 DevTools 中我收到以下错误：

未捕获的类型错误：无法解析模块说明符“@material/base/component”。相对引用必须以“/”、“./”或“../”开头。

此错误来自Top App Bar 的 index.js文件，该文件导入了一堆其他组件：

这是该组件的文件结构的图片Top App Bar：

在top-app-bar/index.js中，我可以手动浏览此文件（以及我想要包含的任何后续模块）并将所有路径重写为相对路径，但这是一种糟糕的方法。

如何配置 Webpack 以自动解析这些相对路径？

我尝试在这样的各种突变中使用resolve.modules，但没有成功：

这是我的项目依赖项：

我想我要么必须弄清楚我在配置 webpack 时做错了什么，配置一个包babel-loader来整理路径，要么实现一个类似于 webpack 的增强解析的自定义解决方案，但只是作为最后的手段。

先感谢您！