如何激活 Material Design JS？
[英]How to activate Material Design JS?
问题描述
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>
I'm learning to work with Material Design.
我正在学习使用 Material Design。 I thought it worked like bootstrap, meaning there is a CDN and then you just add the classes you need, so I got the CDN from this link: https://material.io/develop/web/docs/getting-started/我认为它像引导程序一样工作，这意味着有一个 CDN，然后你只需添加你需要的类，所以我从这个链接得到了 CDN： https://material.io/develop/web/docs/getting-started/
After I added the CDN I got the css working, but not JavaScript. In the instructions it says:添加 CDN 后，我得到了 css 工作，但不是 JavaScript。在说明中它说：
…and instantiate JavaScript:
mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));
How do I instantiate Javascript?如何实例化 Javascript？
I tried to put this code between script tags, but that didn't work.我试图将这段代码放在脚本标签之间，但那没有用。 I think I'm missing some code here.我想我在这里遗漏了一些代码。
Update: The JS CDN seem to work but in each compenente I get an instruction for JavaScript Instantiation for example in this link: https://material.io/develop/web/components/input-controls/text-field/更新：JS CDN 似乎可以工作，但在每个组件中我都得到了 JavaScript 实例化的说明，例如在这个链接中： https://material.io/develop/web/components/input-controls/text-field/
import {MDCTextField} from '@material/textfield';
My question is where do i insert this code for the component to work.我的问题是我在哪里插入此代码以使组件工作。
5 个解决方案
解决方案1
5 2020-07-21 12:50:39
you need to add mdc.{component}.MDC{component} instead if you use cdn如果使用 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>
解决方案2
0 2019-12-29 19:17:31
Please also mention how your code looks like right now.还请提及您的代码现在的样子。
Based on your question, it seems like you may have missed to mention script tag with material design URL in your HTML head tag.根据您的问题，您似乎没有在 HTML head 标签中提及带有材料设计 URL 的脚本标签。 Add following code and see if it helps.添加以下代码，看看它是否有帮助。
<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>
解决方案3
0 2019-12-30 05:12:45
Because the browser doesn't understand ES6 modules just yet, we need tools to make them work today.因为浏览器还不能理解 ES6 模块，所以我们今天需要工具来使它们工作。 A JavaScript bundler takes in our Modules and compiles them into a single JavaScript file or multiple bundles for different parts of your application. JavaScript 打包器接收我们的模块并将它们编译成单个 JavaScript 文件或多个包，用于应用程序的不同部分。
There are few popular bundlers like webpack, Browserify, Rollup, JSPM etc.很少有流行的打包工具，如 webpack、Browserify、Rollup、JSPM 等。
In your case, you are just starting off on how to use modules, you may face difficulties implementing boilerplate for importing modules ES2015 way.在您的情况下，您才刚刚开始了解如何使用模块，您可能会在实现以 ES2015 方式导入模块的样板文件方面遇到困难。
However, you may want to clone Material Design repo because it gives you boilerplate that enables to you to use import module function right away, this will be straight forward and clear to you但是，您可能想要克隆 Material Design 存储库，因为它为您提供样板，使您能够立即使用导入模块功能，这对您来说是直接而清晰的
https://codelabs.developers.google.com/codelabs/mdc-101-web/#1 https://codelabs.developers.google.com/codelabs/mdc-101-web/#1
Prior to get started on this, you need to install GIT, Node, and NPM on your machine.在开始之前，您需要在您的机器上安装 GIT、Node 和 NPM。
Clone their starter repo and cd into cloned directory
将他们的 starter repo 和 cd 克隆到克隆目录中git clone https://github.com/material-components/material-components-web-codelabscd material-components-web-codelabs/mdc-101/starterNow, install all the dependancies listed in package.json with following command
现在，使用以下命令安装 package.json 中列出的所有依赖项npm install
and then run然后运行
npm start
it should start up development server.它应该启动开发服务器。 Now you can change index.html and create or change existing js files according to your requirement现在您可以更改 index.html 并根据您的要求创建或更改现有的 js 文件
解决方案4
0 2022-04-20 09:02:10
For React users, make sure that you put the instantiate code in the Mounting phase , which means put new MDCTextField(Element) in the componentDidMount() function.对于React用户，请确保将实例化代码放在Mounting phase中，这意味着将new MDCTextField(Element)放在componentDidMount() function 中。
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>
);
}
}
解决方案5
-1 2019-12-29 19:11:19
I think the CDN JavaScript source might rely on jQuery in order to run.我认为 CDN JavaScript 源代码可能依赖于 jQuery 才能运行。 If my assumptions are correct, you will need to add a script tag referencing jquery before you load the material.io scripts.如果我的假设是正确的，您将需要在加载 material.io 脚本之前添加一个引用 jquery 的脚本标记。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.