问题标签 [material-components-web]

试图让Material Web 组件选择菜单根据其演示运行，但似乎文档不包含要导入的JS 组件。

我已经尝试过import {MDCSelect} from '@material/select';，遵循与其他 Web 组件的约定，但我得到一个未捕获的引用错误：ReferenceError: mdc is not defined.

我似乎缺少一个基类，或者我导入了错误的 JS 组件，但不确定要包含哪个.

有没有人有这方面的知识？

更新 - 2018 年 10 月 26 日

我在 Github 上发布了这个问题并收到了回复。我相信这是正确的实现，因为它没有引发任何错误，但之前的错误使我无法完全测试这种方法。

一旦我可以测试上述链接中的建议答案，我将立即返回这个问题。

我有这个代码

但是函数 activateFocus 是未定义的。我怎样才能集中注意力？

https://material.io/develop/web/components/input-controls/text-field/

谢谢

我有一个调色板图像，它是由设计师使用 material.io 上的工具创建的。此调色板包括以下颜色十六进制：

• 表面、浅色和深色（显示在调色板的顶部）
• 原色（加上 50、100、200 等...、900 的色调）
• 次要（加色调）

该图像还包括似乎是每个色样的中点和极端处的黑白文本的对比度百分比。

从我看过的材料文档来看，自定义主题的方法似乎是在导入组件之前设置 SCSS 变量，例如 , 我已经尝试过了$mdc-theme-surface。但是，生成的原色和二次色的色调与生成的调色板上的色调不匹配。为了应用这个主题，需要设置哪些额外的变量？$mdc-theme-primary$mdc-theme-secondary

我正在尝试使用MDCMenu 的文档menu.setAbsolutePosition(0, 100);中找到的方法，将“mdc-menu”相对（波纹管）定位到我的顶栏上的溢出按钮，但它似乎没有做太多（实际上使元素卡在屏幕外)，无论我设置什么值。

我创建了一个片段来说明这个问题：

是否可以将辅助颜色应用于 Angular 材料芯片？

我自己在stackblitz上的示例只会显示主要颜色和强调色，而不是次要颜色。

材质示例不使用辅助

Angular 材料芯片概述

$mdc-theme-secondary: #6b2574已在 index.scss 文件的顶部定义。

我有一个材质复选框组件，默认情况下使用$mdc-theme-secondary作为背景颜色。我想更改复选框的颜色而不修改mdc-theme-secondary.

我在看材料文件 。

它提供了这个mixin，但是在尝试了不同的东西之后，我仍然不知道如何使用它。我也找不到任何例子。

感谢您提前提供任何帮助。

附件是用于尝试制作线性进度组件的工作原型的伪代码。

HTML

JavaScript

上述代码旨在显示 50% 的进度。原型不起作用。它的哪一部分可能出错了？以下参考资料是我可以从官方参考文件中获得的最佳参考资料。

参考

1. 线性进步，网页材料设计
2. 线性进度演示，Web 的材料设计

我将 mdc 与 laravel-mix 一起使用，但它没有从节点模块加载 scss 文件。我尝试了一些关于在 mix.sass 中提供包含路径的其他解决方案，但它们不起作用。

我尝试了 webpack.mix.js 中的代码

但它仍然给我同样的错误

我有一个网站，显示大量卡片，如下所示：

我遇到的问题是每张卡下通常有很大的差距，我不知道如何解决这个问题。我希望卡片像拼贴画或拼图一样拼凑在一起。

这是第一张卡源代码的链接。

如果您有任何问题或要求，请在评论中问我。

我正在尝试从 Material.io 集成 material-components-web。但事实证明这很麻烦。我对 Node 世界也很陌生，所以我一直在学习。

这是我到目前为止所做的：

1. 将 NPM 与 Visual Studio 2017 相结合，我可以使用很多功能，但它并没有像我想象的那样工作。例如 Npm init 挂起，但安装/更新命令工作正常。

2. 获得了具有以下依赖项的 Packag.json：

   "devDependencies": { "material-components-web": "0.44.1", "gulp": "3.9.1", "gulp-util": "3.0.8", "gulp-minify-css": "1.2.4", "gulp-path": "4.0.0", "gulp-js-minify": "0.0.3", "gulp-sass": "3.1.0", "gulp-flatten": "0.4.0" }

3. 安装 Gulp 并设置我的 Sass 编译器和 css/js minifier（用于生产）。并在我构建项目之前将它们设置为运行

我有我的@material 文件夹，其中包含所有基本组件。但是现在我遇到了 Javascript 模块依赖的问题。

我注意到标准的“要求”方法不起作用，因为它是一个特定于节点的解析器（如果我错了，请纠正我）。首先，我尝试将 Babel 集成到 gulp 中以将导入转换为 ECMA。但这似乎并不成功。

现在我正在手动转换所有的导入/导出（所以更新是不行的）。它开始工作得很好。但是现在我陷入了依赖地狱中，到处都是引用和导入......来自像（focus-trap.js，tabbale和xtend）这样的依赖项

这甚至可以集成到 ASP.NET MVC 中吗？我还注意到 Material-components-web 开始在他们的 github 上切换到 TypeScript！

非常感谢任何提示或帮助。