4

我将 Material Design 与我的非 Node.js 应用程序一起使用。我需要在我的 HTML 项目中使用Material 概述的文本字段（带有前导图标） 。Material.io 网站显示了某些组件的 JavaScript 代码，但不显示其他组件。如何在我的 HTML 项目中添加概述的文本字段组件？

下面是我的代码：

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" />

    </head>
    <body>
        <!--button class="mdc-button mdc-button--raised">Button</button-->
         

        <div class="mdc-text-field mdc-text-field--outlined">
            <input type="text" id="tf-outlined" class="mdc-text-field__input" />

            <label for="tf-outlined" class="mdc-floating-label">Your Name</label>
            <div class="mdc-notched-outline">
                <svg>
                    <path class="mdc-notched-outline__path"></path>
                </svg>
            </div>
            <div class="mdc-notched-outline__idle"></div>
        </div>
        <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
    </body>
</html>

这段代码的小提琴：jsfiddle

4

2 回答 2

8

You really need to go through the documentation at mdc-textfield. Aside from the html fixes you will see below, be sure to notice the JavaScript that instantiates the textfield component (this is often what trips people up when they are trying to get started). You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).

mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material TextField Quick Start</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <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>
  <body>
    <label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
      <i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
      <input type="text" class="mdc-text-field__input">
      <span class="mdc-notched-outline">
        <span class="mdc-notched-outline__leading"></span>
        <span class="mdc-notched-outline__notch">
          <span class="mdc-floating-label">Label</span>
        </span>
        <span class="mdc-notched-outline__trailing"></span>
      </span>
    </label>
  </body>
</html>

于 2018-06-28T22:09:23.357 回答
0

MDL 文档本身有关于如何仅使用标准<link>和<script>标签来包含组件的资源。

文档： https ://material.io/develop/web/docs/getting-started/

于 2018-06-26T13:38:28.587 回答