如何激活 Material Design JS？

Question

如何激活 Material Design JS？

Vra*_*aja 6 javascript cdn material-design

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

const textField = new MDCTextField(document.querySelector('.mdc-text-field'));

Run Code Online (Sandbox Code Playgroud)

@import "@material/textfield/mdc-text-field";

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

我正在学习使用 Material Design。我认为它像引导程序一样工作，这意味着有一个 CDN，然后你只需添加你需要的类，所以我从这个链接中获得了 CDN：https : //material.io/develop/web/docs/getting-started/

添加 CDN 后，我的 css 可以正常工作，但不能使用 JavaScript。在说明中它说：

...并实例化 JavaScript：

mdc.ripple.MDCRipple.attachTo(document.querySelector('.foo-button'));

如何实例化 Javascript？

我试图将这段代码放在脚本标签之间，但这没有用。我想我在这里缺少一些代码。

更新：JS CDN 似乎可以工作，但在每个组件中，我都会在此链接中获得 JavaScript 实例化的说明：https : //material.io/develop/web/components/input-controls/text-field/

从“@material/textfield”导入 {MDCTextField}；const textField = new MDCTextField(document.querySelector('.mdc-text-field'))

我的问题是我在哪里插入此代码以使组件工作。

Answer 1

Ary*_*sum 5

如果您使用 cdn，则需要添加 mdc.{component}.MDC{component}

const textField = new mdc.textField.MDCTextField(document.querySelector('.mdc-text-field'));

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

Answer 2

Mic*_*nes -1

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

jQuery CDN

归档时间：	5 年，11 月前
查看次数：	2068 次
最近记录：	4 年，10 月前