附件是尝试制作线性进度组件的工作原型的伪代码。
<script src="https://unpkg.com/material-components-web@0.42.1/dist/material-components-web.min.js"></script>
...
<div role="progressbar" class="mdc-linear-progress" id="my-progress-bar">
<div class="mdc-linear-progress__buffering-dots"></div>
<div class="mdc-linear-progress__buffer"></div>
<div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
<div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
</div>
const overallProgress = mdc.linearProgress.MDCLinearProgress.attachTo(document.getElementById('my-progress-bar'));
overallProgress.setProgress(0.5);
上述代码旨在显示 50% 的进度。原型没有功能。它的哪一部分可能出错了？以下参考资料是我从官方参考文件中获得的最好的参考资料。
将Web材料组件用于Web CDN以进行前端设计的示例没有用处.
我发现了这个模态抽屉的演示,但它似乎没有使用已发布的CSS和JavaScript CDN. 演示:模态抽屉演示
如何使用Material Components的CDN实现模态抽屉？
html javascript material-design material-components material-components-web
我正在用这个
https://material.io/develop/web/components/tabs/tab-bar/
制作标签栏
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">title</span>
<span class="mdc-tab__text-label">Name</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">style</span>
<span class="mdc-tab__text-label">Tags</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0">
<span class="mdc-tab__content">
<span class="mdc-tab__icon material-icons" aria-hidden="true">favorite</span> …html javascript material-design material-components material-components-web
我将 Material Design 与我的非 Node.js 应用程序一起使用。我需要在我的 HTML 项目中使用Material 轮廓文本字段（带有前导图标）。Material.io 网站显示某些组件的 JavaScript 代码，但不显示其他组件的 JavaScript 代码。如何在我的 HTML 项目中添加轮廓文本字段组件？
下面是我的代码：
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />
</head>
<body>
<!--button class="mdc-button mdc-button--raised">Button</button-->
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="tf-outlined" class="mdc-text-field__input" />
<label for="tf-outlined" class="mdc-floating-label">Your Name</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</body>
</html>
这段代码的小提琴：jsfiddle
html javascript material-design mdc-components material-components-web
我正在尝试集成 Material.io 中的材料组件网络。但事实证明这是相当麻烦的。我对 Node 世界也很陌生，所以我一边尝试一边学习。
这就是我到目前为止所做的：
将 NPM 与 Visual Studio 2017 结合起来，我可以使用很多功能，但它并不像我想象的那样工作。例如，Npm init 挂起，但安装/更新命令工作正常。
得到了具有以下依赖项的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"
}
安装了 Gulp 并设置了我的 Sass 编译器和 css/js minifier（用于生产）。并在我构建项目之前将它们设置为运行
我有我的 @material 文件夹，其中包含所有基本组件。但现在我遇到了 Javascript 模块依赖性的问题。
我注意到标准的“require”方法不起作用，因为它是一个特定于节点的解析器（如果我错了，请纠正我）。首先，我尝试将 Babel 集成到 gulp 中，以将导入转换为 ECMA。但这似乎并不成功。
现在我正在手动转换所有导入/导出（因此更新是不行的）。一开始效果很好。但现在我陷入了依赖关系地狱，到处都是引用和导入......来自像（focus-trap.js、tabbale 和 xtend）这样的依赖关系
这是否可以集成到 ASP.NET MVC 中？我还注意到 Material-components-web 开始在他们的 github 上切换到 TypeScript！
非常感谢任何提示或帮助。
我一直在研究用于网络的谷歌材料设计，并且对SASS. 就目前而言，我一直在尝试更改mdc-top-app-bar使用fill-color($color)框架中提供的 sass mixin的背景颜色。
试过这几行
@use '@material/button/mdc-button';
@use '@material/button';
@use "@material/top-app-bar/mdc-top-app-bar";
@use "@material/icon-button/mdc-icon-button";
.mdc-top-app-bar {
@include mdc-top-app-bar.fill-color(#8e44ad);
}
显示以下错误消息
ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
?
10 ? @include mdc-top-app-bar.fill-color(#8e44ad);
? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
我们正在使用 MDC 菜单组件。我正在寻找一种在单击菜单中的第一项时不关闭菜单的方法。
我尝试将一个类应用于 mdc-list-item 并将光标指定为自动，但它不起作用。
.menu-do-not-close {
cursor: auto !important;
}
下面是示例小提琴
https://jsfiddle.net/phani25485/Lt6q2gxa/2/
您能否就如何实现这一目标提供一些指导。
javascript material-design material-components mdc-components material-components-web
我正在使用 express 和 material-components-web 编写一个 Node 应用程序，我遇到了 TextField 工作但 Switch 不工作的问题。
这是我用来将相关 JS 附加到元素的代码：
[].slice.call(document.querySelectorAll('.mdc-text-field')).forEach(
function(ele) {
mdc.textField.MDCTextField.attachTo(ele);
});
[].slice.call(document.querySelectorAll('.mdc-switch')).forEach(
function(ele) {
mdc.switch.MDCSwitch.attachTo(ele);
});
当我注释掉文本字段的代码时，它会停止工作，因此该mdc.textField.MDCTextField部分肯定可以正常工作。
我在 Chrome 开发工具中得到的错误是：
(index):446 Uncaught TypeError: Cannot read property 'MDCSwitch' of undefined
at (index):446
at Array.forEach (<anonymous>)
at (index):444
我的 package.json 文件如下所示：
{
"name": "emergencyregister",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node app.js"
},
"dependencies": {
"debug": "~2.6.9",
"ejs": "^2.6.2",
"eslint": "^5.7.0",
"express": "^4.16.4",
"helmet": "^3.20.0",
"http-errors": "~1.6.2",
"material-components-web": "^3.1.0",
"mysql": "^2.16.0", …