logo标签列表

如何激活 Material Design JS？

javascriptmaterial-designcdn
7

import {MDCTextField} from '@material/textfield';

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));
@import "@material/textfield/mdc-text-field";
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<div class="mdc-text-field">
  <input type="text" id="my-text-field" class="mdc-text-field__input">
  <label class="mdc-floating-label" for="my-text-field">Hint text</label>
  <div class="mdc-line-ripple"></div>
</div>

我正在学习如何使用Material Design。我认为它的工作方式类似于Bootstrap，也就是说有一个CDN，然后你只需要添加所需的类，因此我从这个链接获取了CDN： https://material.io/develop/web/docs/getting-started/ 在添加CDN之后，我的CSS可以正常工作，但JavaScript无法正常工作。在说明中，它说：
“...并实例化JavaScript：mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'))；”
那么我该如何实例化JavaScript呢？
我尝试将此代码放置在script标记之间，但无效。我想我在这里缺少一些代码。
更新：JS CDN似乎可以工作，但在每个组件中，我都会得到JavaScript实例化的指令，例如在此链接中： https://material.io/develop/web/components/input-controls/text-field/ “import {MDCTextField} from '@material/textfield'; const textField = new MDCTextField(document.querySelector('.mdc-text-field'))”
我的问题是，在哪里插入此代码以使组件正常工作？
5个回答
7
如果您使用CDN，您需要添加mdc.{component}.MDC{component}。 

const textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<label class="mdc-text-field mdc-text-field--filled">
  <span class="mdc-text-field__ripple"></span>
  <span class="mdc-floating-label" id="my-label-id">Hint text</span>
  <input class="mdc-text-field__input" type="text" aria-labelledby="my-label-id">
  <span class="mdc-line-ripple"></span>
</label>

0
因为浏览器目前还不支持ES6模块，所以我们需要工具来使它们在今天工作。JavaScript捆绑器接收我们的模块并将它们编译成单个JavaScript文件或多个包用于应用程序的不同部分。
像webpack、Browserify、Rollup、JSPM等都是受欢迎的捆绑器。
对于您而言，如果您刚开始学习如何使用模块，则可能会在实现导入模块ES2015方式的样板时遇到困难。
但是，您可能希望克隆Material Design存储库，因为它提供了启用您立即使用导入模块函数的样板，这对您来说会很简单明了。

https://codelabs.developers.google.com/codelabs/mdc-101-web/#1

在开始之前，您需要在计算机上安装GIT、Node和NPM。

  • 克隆他们的起始repo并进入克隆目录

    git clone https://github.com/material-components/material-components-web-codelabs

    cd material-components-web-codelabs/mdc-101/starter

  • 现在，使用以下命令安装package.json中列出的所有依赖项

    npm install

然后运行

npm start

它应该启动开发服务器。现在，您可以根据自己的要求更改index.html并创建或更改现有的js文件。

0
对于React用户，请确保将实例化代码放在Mounting phase中，这意味着将new MDCTextField(Element)放在componentDidMount()函数中。
import './textfield.scss';
import React from 'react';
import { MDCTextField } from '@material/textfield';

export default class TextField extends React.Component {
  // initialize the component after all DOM elements are well rendered
  componentDidMount() {
    const textfield = new MDCTextField(document.querySelector('.mdc-text-field'));
  }

  render() {
    return (
      <label className="mdc-text-field mdc-text-field--outlined">
        <span className="mdc-notched-outline">
          <span className="mdc-notched-outline__leading"></span>
          <span className="mdc-notched-outline__notch">
            <span className="mdc-floating-label" id="my-label-id">Your Name</span>
          </span>
          <span className="mdc-notched-outline__trailing"></span>
        </span>
        <input type="text" className="mdc-text-field__input" aria-labelledby="my-label-id"/>
      </label>
    );
  }
}
0
请同时提及您代码的当前状态。
根据您的问题，看起来您可能忘记在HTML头标签中添加带有Material Design URL的脚本标签。请添加以下代码，查看是否有所帮助。
<head>
  <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
这正是我写的方式，而且在检查中JavaScript似乎也起作用了，但并不完全，例如在此页面：https://material.io/develop/web/components/input-controls/text-field/ 上它说你需要JavaScript实例化，并添加以下代码：import {MDCTextField} from '@material/textfield';const textField = new MDCTextField(document.querySelector('.mdc-text-field')); 我的问题是在哪里以及如何添加它？ - Vraja
请编辑您的问题，并准确地写出您现在拥有的代码。 - parag patel
2
我的问题是在哪里插入JavaScript实例化的代码，例如： import {MDCTextField} from '@material/textfield';const textField = new MDCTextField(document.querySelector('.mdc-text-field')); - Vraja
导入语句在 JavaScript 文件中不起作用，请使用 require。例如，const config = require('/path/to/file'); - parag patel
2
好的，在这里有一个组件的例子，一个按钮，有一个要嵌入HTML的代码和另一个JS代码：...来实例化JavaScript。我的问题是我应该在哪里嵌入这段代码？ - Vraja
显示剩余2条评论
-1

我认为CDN JavaScript源可能依赖于jQuery才能运行。如果我的假设是正确的，那么在加载material.io脚本之前，您需要添加一个引用jquery的脚本标签。

jQuery CDN

1
我只需要浏览一下入门指南和JS源代码，就意识到它不依赖于jQuery。 - Roko C. Buljan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接