问题标签 [material-components-web]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
1041 浏览

drawer - Material Components Web - Persistent 和 Perminent Drawer 未按预期显示

我正在关注 Material Components Web文档。作为页面的模板,我使用的是快速入门中详述的非常基本的模板 - 我的理解是这个模板是一个“包括所有”模板:它使用:node_modules/material-components-web/dist/material-components -web.css 和 https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js (完整代码如下)

似乎 Persistent Drawer 和 Permanent Drawer 没有按预期显示。不可滑动,不向左偏,不拉伸高度。

请注意,临时抽屉确实按预期工作。

我错过了什么?

网页材质组件

0 投票
1 回答
257 浏览

sass - Material.io scss 导入不起作用

我现在正在使用 sass 创建 html 项目,并且客户端请求使用 material.io Web 组件。我的 sass 工作正常。我通过 node_modeules 文件夹包含了 material.io 组件。但是当我尝试像下面的代码一样访问 material-components-web.scss

我在 style.css 文件中收到此错误消息。

我的问题是我想评估我的自定义 scss 文件的所有材料 scss 组件、变量和功能。有什么方法可以访问 html 项目中的这些材料 scss 选项?

0 投票
1 回答
556 浏览

ruby-on-rails - Rails 中的 window.autoInit 使用 material-components-web 和 webpacker

我正在使用带有以下代码的 Rails 5.1.4。我已确认material.js正在处理该文件并且material-components-web已下载并发现该模块。

为什么mdc调用时未定义window.mdc.autoInit()

我努力了

  • 分别进口@material/auto-init
  • autoInit调用放入 onload
  • 添加console.dir(window)/console.dir(this)内部包文件。this不在window包文件中,并且导出未附加到this
0 投票
3 回答
5381 浏览

css - 如何在 Material Components Web (MDC) 中集中单元格?

我想有一个集中的网格单元,例如桌面中有 6 列。在docs中,它说:

网格默认居中对齐。您可以添加 mdc-layout-grid--align-left 或 mdc-layout-grid--align-right 修饰符类来更改此行为。

然后我输入:

期待桌面:

而不是真正输出的内容:

如何让cell保持中心化?

0 投票
1 回答
272 浏览

node.js - 通过 webpack 添加 material-components-web.css

我将 mterial-components-web.css 添加到我的 index.html 文件的标题中。

CSS 组件工作得很好。现在我通过 webpack 添加了一些 javscript 组件。现在我想我可以将所有 vai webpack 添加到我的 bundle.js 中。

没有错误,但没有加载样式!问题出在哪里?

问候

我的 webpack 配置。

0 投票
2 回答
2318 浏览

material-components - MDC-Web 排版:字体定制

MDC 排版是特定于 Roboto 字体的,还是我们可以使用其他 Google 字体实现,如果是这样,推荐的方法是否只是将font-familyCSS 应用于body

最后,似乎所有标题元素都与<h1>似乎破坏了 HTML5 语义性质的元素相关联,即h1通常比h5.

0 投票
2 回答
581 浏览

ember.js - 将 Material Design 组件与 ember-cli-sass 一起使用

我正在尝试将 Material Components Web(MDC-Web) sass 功能与 ember-cli-sass 一起使用。我已经用 Yarn 安装了 MDC-Web

在我的 ember-cli-build.js 文件中,我将 sass includePaths 设置为:

然后在我的 app.scss 文件中尝试导入完整的组件库,如下所示:

但是我收到了错误:

错误:错误:找不到或无法读取要导入的文件:@material/button/mdc-button。

为什么 SASS 编译器找不到它?

0 投票
2 回答
2749 浏览

sass - 使用 SASS Mixin 更改 MDC 布局网格的装订线大小

我正在尝试使用 SASS Mixin 更改 MDC Material Components Web 布局网格的排水沟大小,但失败了!

目前我正在使用:

我可以看到正在使用混合...但是排水沟保持不变的大小。

我究竟做错了什么?

0 投票
1 回答
1803 浏览

web - MDC-Web:多个简单菜单

我使用 google MATERIAL COMPONENTS FOR THE WEB 并遇到“简单菜单”问题。检查我的 codepen:[每页有多个菜单?][1]

第一个菜单有效,其他菜单无效。每页有多个菜单我该怎么做?

0 投票
1 回答
1287 浏览

web - 如何在 Material Components Web 中构建抽屉?

我刚刚进入 Material Components for the Web 并且我希望有一个类似这样的网站,尽管我尝试了文档中的代码(这显然不完整)并得到了这个。我怎样才能得到像这个例子一样的东西?