标签: material-components-web

细节

我开始研究用于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 ]中的getting-started-docs页面中获得的.同样,MDC有这个前身 - 斜线 - 轻量级库 Material Design Lite(MDL),您可以轻松自定义主题颜色.它可以通过其自定义CSS主题构建器完成.^{[ 2 ]}

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

...目前,MDC Web支持使用Sass和CSS Custom Property进行主题化,并且一旦该服务可用,也会支持CDN支持计划.

事实证明,通过MDC的CDN URL修改主题颜色目前不是一种选择.

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

参考

1. 入门,Web的Material Components
2. 自定义CSS主题构建器,Material Design Lite
3. 主题指南,Web的材料组件

我如何使用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.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

我不明白这些组件之间的区别,但我想将"官方"Google Web组件用于我正在创建的Web应用程序.

我希望有一个集中的网格单元格,例如桌面上有6列.在文档中,它说:

默认情况下,网格对齐.您可以添加mdc-layout-grid-align-left或mdc-layout-grid-align-right修饰符类来更改此行为.

然后我输入:

<div class="mdc-layout-grid">
  <div class="mdc-layout-grid__inner">
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">first</div>
    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3-desktop">second</div>
  </div>
</div>

在桌面上期待:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
|---|---|---|---|---|---|---|---|---|----|----|----|
| ~ | ~ | ~ |   first   |  second   | ~  |  ~ | ~  |

而不是真正的输出:

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 …

是MDC排版特有的Roboto字体，或者我们可以与其他谷歌的字体，如果这样实施，简直到应用建议的方式font-familyCSS来body？

最后，似乎所有头元素联系在一起的<h1>元素，这似乎打破HTML5的语义性质，即h1通常具有高于意义h5。

我需要在 MDC 卡的标题之前添加一个图标，如图所示（标签 2）。但是，根据 MDC 设计，我不知道正确的 HTML。这是我迄今为止的卡片 HTML 代码：

<div class="mdc-card demo-card undefined">
    <div class="demo-card__primary">
        <h1 class="demo-card__title mdc-typography--headline6">Some Title</h1>
        <div class="mdc-card__actions">
            <div class="mdc-card__action-buttons">
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 1
                </button>
                <button class="mdc-button mdc-card__action mdc-card__action--button mdc-button--raised mdc-ripple-upgraded">
                    Button 2
                </button>
            </div>
        </div>
    </div>
</div>

有人可以指出我要添加的正确 HTML 吗？MDC 文档不是很清楚。

我有这个代码

    this.mdc_text = mdc.textField.MDCTextField.attachTo(this.$el);
    if (this.autofocus) {
        this.mdc_text.activateFocus();
    }

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

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

谢谢

Material Web Components（链接）和Material Components Web（链接）之间有什么区别吗？

Material Web Components 除了

构建在Material Components Web项目和 LitElement 之上，Material Web Components 支持可靠的开发工作流程，以构建美观且功能强大的 Web 项目。

而材料组件 Web 是

网页材料组件 (MDC Web) 可帮助开发人员执行材料设计。这些组件由 Google 的核心工程师和 UX 设计师团队开发，可实现可靠的开发工作流程，以构建美观且实用的 Web 项目。

它只是在 LitElement 中使用 Web 组件重新实现所有 MDC 组件吗？

目前关于 Material Web Components 的文档非常稀少，因此很难比较它们在测试应用程序中的使用情况。

顺便说一句，这个命名很糟糕，希望他们在预发布期间更改名称。

我想在我的 Angular 项目中使用 mdc-image-list。我收到一个错误：

@import "@material/feature-targeting/functions";
       ^
      Can't find stylesheet to import.
   ?
21 ? @import "@material/feature-targeting/functions";
   ?         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ?
  node_modules/@material/image-list/_mixins.scss 21:9         @import
  node_modules/@material/image-list/mdc-image-list.scss 21:9  @import
  stdin 2:9                                                   root stylesheet

我按照https://material.io/develop/web/components/image-lists/的安装步骤操作，但我仍然收到此错误。我尝试再次删除node_modules和 npm 安装。我不确定我的 sass-loader 是否有问题，因为我使用了 Material 的布局网格，导入了@import "@material/layout-grid/mdc-layout-grid";它并且工作正常。什么可能出错？

我正在关注材料设计教程here。本教程遵循 Node JS 方法，并使用 npm 安装材料设计组件。这很好，我让 MDC 101 项目完全按照教程运行。文本框标签很好地浮在顶部，很快就离开了，我开始在文本在页面底部显示进入这里。

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

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shrine (MDC Web Example App)</title>
    <link rel="shortcut icon" href="https://material.io/favicon.ico">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
</head>
<body>

<form action="home.html">
    <div class="mdc-text-field mdc-text-field--box username">
        <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
        <label class="mdc-floating-label" for="username-input">Username</label>
        <div class="mdc-line-ripple"></div>
    </div>
    <div class="mdc-text-field …